Google Fonts hiện hỗ trợ đầy đủ các phông chữ có thể thay đổi trong bản cập nhật API v2. 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 trục. Để tìm hiểu sâu hơn về các phông chữ đa dạng, hãy tìm hiểu thêm qua tài liệu giới thiệu có hình minh hoạ tương tác 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 mỗi họ đã thay đổi để mô tả "không gian thiết kế" cho phông chữ có thể thay đổi.
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 "Tạo Web đẹp", bằng phông chữ Crimson Pro.
Nhiều gia đình
Để yêu cầu nhiều gia đình, hãy chỉ định tham số family= cho mỗi 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>
Sử dụng trình duyệt để mở tệp, trang sẽ hiển thị văn bản "Making the Web Beautiful", trước tiên là trong Crimson Pro, sau đó là trong Literata.
Phạm vi trục
Phông chữ biến đổi cung cấp nhiều loại kiểu liên tục, thường không cần bổ sung độ trễ. Điều này có liên quan đến thiết kế đáp ứng. Kiểu chữ động này sử dụng nhiều kiểu liên tục, cung cấp tất cả có trọng số từ 100 đến 900 trên một trang và thay đổi trọng số một cách linh hoạt dựa trên một số điều kiện.
Để yêu cầu phạm vi của một trục phông chữ biến, hãy kết hợp 2 giá trị với ..
| Phông chữ | Yêu cầu |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Màu đỏ thẫm in nghiêng [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold In nghiêng và [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Kiểu riêng lẻ, 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 phương thức gia đình đã yêu cầu. Để yêu cầu các kiểu riêng lẻ khác, chẳng hạn như trọng lượng cụ thể, thêm dấu hai chấm (:) sau tên bộ phông chữ, theo sau là danh sách các trục từ khoá liên quan đến tài sản theo thứ tự bảng chữ cái, ký hiệu a còng (@) 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 minh hoạ trong thực tế.
| Phông chữ | Yêu cầu |
|---|---|
| Crimson Pro (mặc định) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Crimson Pro Bold | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro Regular và Đậm | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold và Đậm nghiêng | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts liệt kê tất cả các kiểu có sẵn cho mỗi bộ phông chữ.
Kiểu mặc định
Khi một yêu cầu không chỉ định vị trí hoặc dải ô cho một trục, giá trị mặc định vị trí sẽ được sử dụng. Vị trí mặc định của trục nghiêng là 0 (bình thường) và giá trị mặc định cho trục trọng số là 400 (thông thường).
Đối với những gia đình có trục không chứa vị trí mặc định, các yêu cầu có nếu bạn không chỉ định vị trí cho các trục đó thì sẽ không thành công. Ví dụ: khi yêu cầu một có giá trị trục số nằm trong khoảng từ 500 đến 900 thì vị trí của cân nặng phải là đã chỉ định.
Trọng số không chuẩn
Với phông chữ tĩnh, kiểu độ đậm 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 hiển thị trọng số trung gian:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Tối ưu hoá cho độ trễ và kích thước tệp
Hãy chọn chính xác kiểu bạn đang sử 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 của bạn tải nhiều dữ liệu phông chữ xuống hơn mức cần thiết, dẫn đến độ trễ cao hơn. Nếu bạn chỉ sử dụng 3 trọng số cụ thể, hãy chỉ định chúng trong yêu cầu của bạn dưới dạng kiểu riêng. Nếu bạn sử dụng khoảng trọng số liên tục, hãy chỉ định khoảng trọng lượng đó trong yêu cầu của bạn.
Sử dụng tính năng hiển thị phông chữ
font-display
cho phép bạn kiểm soát những gì sẽ xảy ra trong khi phông chữ vẫn đang tải hoặc
nếu không thì không dùng được. Việc chỉ định một giá trị khác với auto mặc định là
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ữ của bạn
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 những chữ cái nào. Điều này thường xảy ra khi bạn đang sử dụng phông chữ trên web trong một 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= cho phông chữ của mình
URL yêu cầu. Thao tác này cho phép Google Fonts trả về tệp phông chữ được tối ưu hoá
yêu cầu của bạn. Trong một số trường hợp, thao tác này có thể giảm kích thước của tệp phông chữ lên 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. Ví dụ: nếu
bạn đang chỉ sử dụng Inconsolata cho tiêu đề blog của mình, bạn có thể đặt tiêu đề
chính là giá trị của text=. Yêu cầu sẽ hiển thị như sau:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Giống như với tất cả 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 hoạt động với các phông chữ quốc tế, cho phép bạn chỉ định UTF-8 ký tự. Ví dụ: ¡Hola! được biểu thị là:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Xin lưu ý rằng chuỗi 'text=' chỉ có thể chỉ định tham số một lần. Có áp dụng cho mọi gia đình trong yêu cầu. Vui lòng dùng các yêu cầu API riêng biệt nếu bạn cần các tối ưu hoá văn bản khác nhau trên nhiều gia đình.
Tạo URL API
Độ nghiêm ngặt
Xin lưu ý rằng CSS API mới 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 CSS API ban đầu.
Nguyên tắc chung:
- Liệt kê các trục theo thứ tự bảng chữ cái (
en-USngôn ngữ) - Các nhóm giá trị của trục (tức là các bộ dữ liệu) cần được sắp xếp theo số
- Các bộ dữ liệu không được chồng chéo nhau hoặc chạm vào (ví dụ:
wght400..500 và 500..600)
Thông số kỹ thuật URL 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: Một 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ị nằm trong phạm vi của trục tương ứng
text: Văn bản sẽ được hiển thị bằng kiểu chữ yêu cầu
display: auto | block | swap | fallback | optional
Hỗ trợ trình duyệt cũ
Những trình duyệt không hỗ trợ phông chữ có thể thay đổi có thể không hiển thị thiết kế của bạn dưới dạng dự định. Kiểm tra khả 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 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 @supports
trong CSS của bạn để cung cấp các tính năng phông chữ có thể thay đổi.
Trong ví dụ này, chúng ta muốn sử dụng độ đậm 450 của Văn bản Markazi, nhưng sẽ phải sử dụng quay trở lại Thường xuyên (trọng số 400) hoặc Trung bình (trọng số 500) khi thay đổi 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 những khách hàng hỗ trợ
với phông chữ có thể thay đổi và có độ đậm là 400 đến 500 so với những phông chữ không có trọng số này. Nhìn chung,
dự phòng trong phạm vi yêu cầu của bạn sẽ có sẵn 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 biết kiểu nào sẽ có sẵn trên trình duyệt cũ đối với một số trình duyệt các yêu cầu khác nhau.
| Yêu cầu | Các kiểu có 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ữ có thể thay đổi
Bạn có thể tìm thấy bảng gồm các phông chữ thay đổi có trong API v2 tại đây.
Tài liệu đọc thêm
- Xem danh sách đầy đủ các bộ phông chữ do Google Fonts API cung cấp trên Google Fonts (Phông chữ Google).
- Tìm hiểu thêm về cách Google Fonts API hoạt động trên Trang Cân nhắc về kỹ thuật.