Google Fonts hiá»n há» trợ Äầy Äủ các phông chữ có thá» thay Äá»i trong bản cáºp nháºt API phiên bản 2. Chúng tôi sẽ giải thÃch cách gá»i cả bá» phông chữ ÄÆ¡n và nhiá»u bá» phông chữ cÅ©ng nhÆ° cách chá» Äá»nh phạm vi trục. Äá» hiá»u rõ hÆ¡n vá» các phông chữ có thá» thay Äá»i, hãy tìm hiá»u thêm qua tà i liá»u tà i liá»u minh hoạ tÆ°Æ¡ng tác nà y của David Berlow tại TypeNetwork.
TÃnh nÄng má»i
Tất cả Äá»u bắt Äầu vá»i má»t URL cÆ¡ sá» má»i:
https://fonts.googleapis.com/css2
Cú pháp Äá» chá» Äá»nh kiá»u trong từng nhóm Äã thay Äá»i Äá» mô tả phông chữ biến Äá»i "không gian thiết kế".
HÆ°á»ng dẫn bắt Äầu nhanh
Sao chép và dán HTML nà y và o má»t tá»p:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro"> <style> body { font-family: 'Crimson Pro', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
Khi sá» dụng trình duyá»t Äá» má» tá»p, trang sẽ hiá»n thá» vÄn bản " web the web" ("Là m Äẹp cho web") á» phông chữ Crimson Pro.
Nhiá»u gia Äình
Äá» yêu cầu nhiá»u gia Äình, hãy chá» Äá»nh thông sá» family=
cho từng gia Äình.
Và dụ: Äá» yêu cầu phông chữ Crimson Pro và Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Sao chép và dán HTML nà y và o má»t tá»p:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata"> <style> body { font-size: 48px; } div:nth-child(1) { font-family: 'Crimson Pro', serif; } div:nth-child(2) { font-family: 'Literataâ, serif; } </style> </head> <body> <div>Making the Web Beautiful!</div> <div>Making the Web Beautiful!</div> </body> </html>
Khi sá» dụng trình duyá»t Äá» má» tá»p, trang sẽ hiá»n thá» vÄn bản "Make the Web Beauty", trÆ°á»c tiên là trong Crimson Pro, sau Äó là Literata.
Phạm vi trục
Phông chữ biến Äá»i cung cấp dải kiá»u liên tục, thÆ°á»ng không có Äá» trá» bá» sung. Äiá»u nà y liên quan Äến thiết kế Äáp ứng. Kiá»u chữ Äá»ng nà y sá» dụng nhiá»u kiá»u Äá»nh dạng liên tục, cung cấp tất cả trá»ng sá» từ 100 Äến 900 trên má»t trang, và thay Äá»i trá»ng sá» theo Äáp ứng dá»±a trên má»t sá» Äiá»u kiá»n.
Äá» yêu cầu má»t dải trục phông chữ có thá» thay Äá»i, hãy kết hợp 2 giá trá» vá»i ..
(Các) phông chữ | Yêu cầu |
---|---|
Crimson Pro [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro Nghiêng [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Äáºm nghiêng và [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Phong cách riêng, chẳng hạn nhÆ° trá»ng lượng
Nếu không có thông sá» kỹ thuáºt vá» kiá»u, API sẽ cung cấp kiá»u mặc Äá»nh của nhóm Äược yêu cầu. Äá» yêu cầu các kiá»u riêng lẻ khác, chẳng hạn nhÆ° trá»ng sá» cụ thá», hãy thêm dấu hai chấm (:) và o sau tên bá» phông chữ, theo sau là danh sách từ khoá thuá»c tÃnh trục theo thứ tá»± bảng chữ cái, ký hiá»u a (@) và má»t hoặc nhiá»u danh sách giá trá» cho các thuá»c tÃnh trục Äó.
Những và dụ nà y cho thấy Äiá»u nà y trong thá»±c tế.
(Các) phông chữ | Yêu cầu |
---|---|
Crimson Pro (mặc Äá»nh) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
Crimson Pro In Äáºm | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
Crimson Pro Pro và bold | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
Crimson Pro Äáºm và In Äáºm | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts liá»t kê tất cả kiá»u chữ hiá»n có cho má»i bá» phông chữ.
Kiá»u mặc Äá»nh
Khi yêu cầu không chá» Äá»nh vá» trà hoặc phạm vi cho má»t trục, vá» trà mặc Äá»nh sẽ Äược sá» dụng. Vá» trà mặc Äá»nh của trục in nghiêng là 0 (thông thÆ°á»ng) và mặc Äá»nh là trục trá»ng sá» là 400 (thông thÆ°á»ng).
Äá»i vá»i các gia Äình có trục không chứa vá» trà mặc Äá»nh, các yêu cầu không chá» Äá»nh vá» trà cho các trục Äó sẽ không Äược thá»±c hiá»n. Và dụ: khi yêu cầu má»t nhóm gia Äình có trục trá»ng lượng từ 500 Äến 900, bạn phải chá» Äá»nh vá» trà trá»ng lượng.
Trá»ng sá» không chuẩn
Vá»i phông chữ tÄ©nh, kiá»u trá»ng sá» thÆ°á»ng Äược chá» Äá»nh là bá»i sá» của 100 (và dụ: 300, 400, 700). Phông chữ biến Äá»i cung cấp cả trá»ng sá» chuẩn và trá»ng sá» trung gian. Cách kết xuất trá»ng sá» trung gian:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Tá»i Æ°u hoá Äá» trá» và kÃch thÆ°á»c tá»p
Hãy thá» hiá»n chÃnh xác những kiá»u bạn Äang dùng. API phân phá»i các kiá»u Äược yêu cầu trong bá» phông chữ nhá» gá»n nhất. Viá»c yêu cầu kiá»u không sá» dụng có thá» khiến ngÆ°á»i dùng tải xuá»ng nhiá»u dữ liá»u phông chữ hÆ¡n mức cần thiết, gây ra Äá» trá» lâu hÆ¡n. Nếu bạn chá» sá» dụng 3 trá»ng sá» cụ thá», hãy chá» Äá»nh các trá»ng sá» Äó trong yêu cầu dÆ°á»i dạng các kiá»u riêng lẻ. Nếu bạn sá» dụng phạm vi trá»ng sá» liên tục, hãy chá» Äá»nh phạm vi trá»ng sá» Äó trong yêu cầu của bạn.
Sá» dụng chế Äá» hiá»n thá» phông chữ
Thuá»c tÃnh font-display cho phép bạn kiá»m soát những gì sẽ xảy ra khi phông chữ vẫn Äang tải hoặc không hiá»n thá». Viá»c chá» Äá»nh má»t giá trá» khác auto
mặc Äá»nh thÆ°á»ng thÃch hợp.
Truyá»n giá trá» mong muá»n và o tham sá» display
:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Tá»i Æ°u hoá yêu cầu phông chữ
Thông thÆ°á»ng, khi muá»n sá» dụng phông chữ web trên trang web hoặc ứng dụng của mình, bạn biết trÆ°á»c mình sẽ cần chữ cái nà o. Äiá»u nà y thÆ°á»ng xảy ra khi bạn Äang sá» dụng phông chữ web trong biá»u trÆ°ng hoặc tiêu Äá».
Trong những trÆ°á»ng hợp nà y, bạn nên cân nhắc chá» Äá»nh giá trá» text=
trong URL yêu cầu phông chữ. Viá»c nà y cho phép Google Fonts trả vá» má»t tá»p phông chữ Äược tá»i Æ°u hoá cho yêu cầu của bạn. Trong má»t sá» trÆ°á»ng hợp, Äiá»u nà y có thá» là m giảm kÃch thÆ°á»c của tá»p phông chữ tá»i 90%.
Äá» sá» dụng tÃnh nÄng nà y, bạn chá» cần thêm text=
và o yêu cầu API của mình. Và dụ: Nếu chá» sá» dụng Inconsolata cho tiêu Äá» blog, bạn có thá» tá»± Äặt tiêu Äá» là m giá trá» của text=
. Yêu cầu sẽ có dạng như sau:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
CÅ©ng nhÆ° vá»i má»i chuá»i truy vấn, bạn nên mã hoá URL giá trá»:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
TÃnh nÄng nà y cÅ©ng dùng Äược cho các phông chữ quá»c tế, cho phép bạn chá» Äá»nh các ký tá»± UTF-8. Và dụ: ¡Hola! Äược biá»u thá» dÆ°á»i dạng:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Xin lÆ°u ý rằng bạn chá» có thá» chá» Äá»nh tham sá» 'text=' má»t lần. Yêu cầu nà y áp dụng cho tất cả gia Äình trong yêu cầu nà y. Vui lòng sá» dụng các yêu cầu API riêng nếu bạn cần tá»i Æ°u hoá vÄn bản riêng cho nhiá»u gia Äình.
Tạo URL API
Äá» nghiêm ngặt
Xin lÆ°u ý rằng API CSS Äã cáºp nháºt sẽ nghiêm ngặt hÆ¡n vá» những yêu cầu Äược chấp nháºn so vá»i API CSS ban Äầu.
Nguyên tắc chung:
- Liá»t kê các trục theo thứ tá»± bảng chữ cái (
en-US
ngôn ngữ) - Các nhóm giá trá» trục (và dụ: tuples) cần Äược sắp xếp theo sá»
- Các bá» dữ liá»u không Äược trùng lặp hoặc chạm và o (và dụ:
wght
400..500 và 500..600)
Quy cách của API API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec
: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name
: Tên bỠphông chữ
axis_tag_list
: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis
: Thẻ trục, và dụ: ital
, wdth
, wght
axis_tuple_list
: <axis_tuple>[;<axis_tuple>...]
axis_tuple
: <value>[,<value>...] // Same length as axis_tag_list
value
: <range>
| <float>
range
: <float>..<float>
float
: Má»t giá trá» trong phạm vi trục tÆ°Æ¡ng ứng
text
: VÄn bản sẽ hiá»n thá» trong kiá»u chữ Äược yêu cầu
display
: auto
| block
| swap
| fallback
| optional
Há» trợ trình duyá»t cÅ©
Các trình duyá»t không há» trợ phông chữ có thá» không hiá»n thá» Äược thiết kế của bạn nhÆ° dá»± kiến. Kiá»m tra tÃnh nÄng há» trợ phông chữ có thá» thay Äá»i của trình duyá»t trên caniuse.
Bằng cách thá»±c hà nh tÃnh nÄng nâng cao tÄng dần, bạn có thá» tránh hà nh vi không mong muá»n trong các trình duyá»t cÅ© Äó. Sá» dụng các truy vấn @supports
trong CSS Äá» thay thế các tÃnh nÄng phông chữ của biến.
Trong và dụ nà y, chúng tôi muá»n sá» dụng trá»ng sá» 450 của VÄn bản Markazi, nhÆ°ng sẽ phải quay lại Chế Äá» thông thÆ°á»ng (trá»ng sá» 400) hoặc Trung bình (trá»ng sá» 500) khi các tÃnh nÄng phông chữ không Äược há» trợ:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
Yêu cầu CSS Markazi+Text:wght@450
gá»i trá»ng sá» 450 Äến các ứng dụng khách há» trợ phông chữ có thá» thay Äá»i và trá»ng sá» 400 và 500 cho các ứng dụng không há» trợ. Nhìn chung, tÃnh nÄng dá»± phòng trong phạm vi yêu cầu của bạn sẽ có trong các trình duyá»t cÅ©.
Axis | Dự phòng |
---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Những và dụ nà y cho thấy các kiá»u sẽ có trên trình duyá»t cÅ© cho má»t sá» yêu cầu.
Yêu cầu | Các kiá»u có sẵn trên trình duyá»t cÅ© |
---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Phông chữ biến thỠcó sẵn
Bạn có thá» xem bảng phông chữ biến Äá»i trong API phiên bản 2 tại Äây.
Tà i liá»u Äá»c thêm
- Xem danh sách Äầy Äủ các bá» phông chữ do API phông chữ của Google cung cấp trên Google Fonts.
- Tìm hiá»u thêm vá» cách hoạt Äá»ng của API Google Fonts trên trang Cân nhắc kỹ thuáºt.