Cấu hình phông chữ
Mặc dù bạn có thể sử dụng HTML và CSS để tùy chỉnh phông chữ và style cho các slide theo ý muốn, Slidev cũng cung cấp một cách tiện lợi để sử dụng chúng một cách dễ dàng.
Trong phần frontmatter, cấu hình như sau:
---
fonts:
# cơ bản là văn bản
sans: Robot
# sử dụng với class css `font-serif` từ UnoCSS
serif: Robot Slab
# cho khối code, inline code, v.v.
mono: Fira Code
---
Vậy là xong.
Phông chữ sẽ được tự động import từ Google Fonts. Điều này có nghĩa là bạn có thể sử dụng bất kỳ phông chữ nào có sẵn trên Google Fonts trực tiếp.
Phông chữ cục bộ
Theo mặc định, Slidev giả định tất cả các phông chữ được chỉ định thông qua cấu hình fonts
đến từ Google Fonts. Nếu bạn muốn sử dụng phông chữ cục bộ, hãy chỉ định fonts.local
để không tự động import phông chữ.
---
fonts:
# giống như font-family trong css, bạn có thể dùng `,` để phân tách nhiều phông chữ dự phòng
sans: 'Helvetica Neue,Robot'
# đánh dấu 'Helvetica Neue' là phông chữ cục bộ
local: Helvetica Neue
---
Độ dày & chữ nghiêng
Theo mặc định, Slidev import ba độ dày (weight) 200
,400
,600
cho mỗi phông chữ. Bạn có thể cấu hình chúng như sau:
---
fonts:
sans: Robot
# mặc định
weights: '200,400,600'
# import phông chữ nghiêng, mặc định là `false`
italic: false
---
Cấu hình này áp dụng cho tất cả phông chữ web. Để kiểm soát chi tiết hơn độ dày của từng phông chữ, bạn cần nhập thủ công bằng HTML và CSS.
Phông chữ dự phòng
Trong hầu hết các trường hợp, bạn chỉ cần chỉ định "phông chữ đặc biệt" và Slidev sẽ thêm các phông chữ dự phòng cho bạn, ví dụ:
---
fonts:
sans: Robot
serif: Robot Slab
mono: Fira Code
---
sẽ cho kết quả:
.font-sans {
font-family: "Robot",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.font-serif {
font-family: "Robot Slab",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
}
.font-mono {
font-family: "Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
Nếu bạn muốn disable phông chữ dự phòng, hãy cấu hình như sau:
---
fonts:
mono: 'Fira Code, monospace'
fallbacks: false
---
Nhà cung cấp
- Các option:
google
|none
- Mặc định:
google
Hiện tại, chỉ có Google Fonts được hỗ trợ, chúng tôi đang có kế hoạch bổ sung thêm nhiều nhà cung cấp trong tương lai. Chỉ định none
sẽ disable hoàn toàn tính năng tự động import và coi tất cả các phông chữ là cục bộ.
---
fonts:
provider: none
---