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-USngô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ụ:
wght400..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.