Trang này được dịch bởi Cloud Translation API.

Cập nhật CSS API

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.

Làm đẹp cho trang web!

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.

Làm đẹp cho trang web!

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`

Có vẻ như trình duyệt của bạn không hỗ trợ phông chữ đa dạng (caniuse). Trên một trình duyệt hỗ trợ các biến thể phông chữ, văn bản sau đây sẽ hiển thị Crimson Pro như một bộ tạ trơn từ 400 đến 500. Ảnh động CSS có thể tạo văn bản biến đổi phong cách một cách mượt mà khi tương tác.

Nếu trình duyệt của bạn hỗ trợ đầy đủ các phông chữ có thể thay đổi (caniuse), thì văn bản sau đây sẽ kết xuất Crimson Pro dưới dạng một tập hợp trọng số mượt mà từ 400 đến 500. Hoạt ảnh CSS có thể làm cho văn bản thay đổi kiểu cách một cách mượt mà khi tương tác.

Làm đẹp cho trang web!

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ì hệ thống 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

Có vẻ như trình duyệt của bạn không hỗ trợ phông chữ có thể thay đổi (caniuse). Trên trình duyệt hỗ trợ các biến thể phông chữ, văn bản sau đây sẽ hiển thị màu Đỏ thẫm Pro với trọng số dễ phân biệt là 400, 450 và 500.

Nếu trình duyệt của bạn hỗ trợ đầy đủ các phông chữ có thể thay đổi (caniuse), văn bản sau sẽ hiển thị Crimson Pro với trọng số khác biệt là 400, 450 và 500.

Làm đẹp cho trang web!

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 lượng 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ữ

Phông chữ hiển thị 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, 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-US ngô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ụ: wght 400..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.