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

Bắt đầu sử dụng Google Fonts API

Hướng dẫn này giải thích cách sử dụng Google Fonts API để thêm phông chữ vào trang web . Bạn không cần phải lập trình; bạn chỉ cần thêm một đặc biệt biểu định kiểu liên kết đến tài liệu HTML của bạn, sau đó tham chiếu đến phông chữ theo kiểu CSS.

Một ví dụ nhanh

Dưới đây là một ví dụ. Sao chép và dán HTML sau vào một tệp:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Sau đó, mở tệp trong một trình duyệt web hiện đại. Bạn sẽ thấy một trang hiển thị sau đây, bằng phông chữ có tên là Tangerine:

Làm đẹp cho trang web!

Câu đó là văn bản thông thường, vì vậy bạn có thể thay đổi hình thức của câu bằng cách sử dụng CSS. Thử thêm bóng vào kiểu trong ví dụ trước:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Bây giờ, bạn sẽ thấy bóng đổ bên dưới văn bản:

Làm đẹp cho trang web!

Và đó chỉ là khởi đầu những gì bạn có thể thực hiện với Fonts API và CSS.

Tổng quan

Bạn có thể bắt đầu sử dụng Google Fonts API chỉ qua hai bước sau:

Thêm liên kết biểu định kiểu để yêu cầu(các) phông chữ trên web mong muốn:
```
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">
```
Tạo kiểu cho một phần tử bằng phông chữ web được yêu cầu, trong một biểu định kiểu:
```
.css-selector {
font-family: 'Font Name', serif;
}
```
hoặc có kiểu cùng dòng trên chính phần tử đó:
```
<div style="font-family: 'Font Name', serif;">Your text</div>
```

Để biết danh sách các phông chữ bạn có thể sử dụng, hãy xem bài viết Google Fonts.

Chỉ định họ và kiểu phông chữ trong URL biểu định kiểu

Để xác định URL nào sẽ sử dụng trong liên kết biểu định kiểu của bạn, hãy bắt đầu bằng thuộc tính Google URL cơ sở của Fonts API:

https://fonts.googleapis.com/css

Sau đó, thêm tham số URL family=, với một hoặc nhiều tên bộ phông chữ và kiểu.

Ví dụ: để yêu cầu Phông chữ Inconsolata:

https://fonts.googleapis.com/css?family=Inconsolata

Để yêu cầu nhiều bộ phông chữ, hãy phân tách tên bằng ký tự gạch đứng (|).

Ví dụ: để yêu cầu phông chữ Quýt, Inconsolata và Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Khi yêu cầu nhiều phông chữ, bạn sẽ có thể sử dụng tất cả các phông chữ đó trong trang của mình. (Nhưng đừng quá mong đợi; hầu hết các trang đều không cần nhiều phông chữ và việc yêu cầu quá nhiều phông chữ có thể làm cho trang của bạn tải chậm).

Google Fonts API cung cấp phiên bản thông thường của các phông chữ được yêu cầu bằng cách mặc định. Để yêu cầu kiểu hoặc trọng số khác, hãy thêm dấu hai chấm (:) vào tên của phông chữ, theo sau là danh sách kiểu hoặc độ đậm được phân tách bằng dấu phẩy (,).

Ví dụ:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Để tìm hiểu các kiểu và độ đậm có sẵn cho một phông chữ nhất định, hãy xem danh sách phông chữ trong Google Fonts.

Đối với mỗi kiểu bạn yêu cầu, bạn có thể cung cấp tên đầy đủ hoặc viết tắt; đối với trọng số, bạn có thể chỉ định trọng số bằng số:

Phong cách	Thông số kỹ thuật
in nghiêng	`italic` hoặc `i`
đậm	`bold` hoặc `b` hoặc trọng số dạng số, chẳng hạn như 700
đậm nghiêng	`bolditalic` hoặc `bi`

Ví dụ: để yêu cầu Cantarell in nghiêng và Droid Serif in đậm, bạn có thể sử dụng bất kỳ trong số các URL sau:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

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ì xảy ra khi phông chữ không có sẵn. Chỉ định một giá trị khác so với auto mặc định thường phù hợp.

Truyền giá trị mong muốn vào tham số của chuỗi truy vấn display:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Chỉ định tập hợp con của tập lệnh

Một số phông chữ trong Thư mục phông chữ của Google hỗ trợ nhiều chữ viết (ví dụ: tiếng Latinh, chữ Kirin và tiếng Hy Lạp). Đơn đặt hàng để chỉ định tập hợp con nào nên được tải xuống, tham số tập hợp con nên được được thêm vào URL.

Ví dụ: để yêu cầu tập hợp con Chữ Kirin của Phông chữ Roboto Mono, URL sẽ là:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Để yêu cầu tập hợp con Hy Lạp của Phông chữ Roboto Mono, URL sẽ là:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Để yêu cầu cả tập hợp con tiếng Hy Lạp và chữ Kirin của Phông chữ Roboto Mono, URL sẽ là:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Tập hợp con La-tinh luôn được đưa vào nếu có và không cần được chỉ định. Xin lưu ý rằng nếu trình duyệt ứng dụng hỗ trợ dải Unicode (http://caniuse.com/#feat=font-unicode-range) tham số tập hợp con sẽ bị bỏ qua; trình duyệt sẽ chọn từ các tập hợp con mà phông chữ hỗ trợ để có được những gì cần thiết cho việc hiển thị văn bản.

Để xem danh sách đầy đủ các phông chữ và tập hợp con phông chữ có sẵn, vui lòng xem Google Fonts (Phông chữ Google).

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ữ trên 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 trả về một tệp phông chữ được tối ưu hoá cho của bạn. Trong một số trường hợp, tính năng này có thể giảm tới 90% kích thước của tệp phông chữ.

Để sử dụng tính năng này, bạn chỉ cần thêm text= vào các yêu cầu API Google Fonts. Cho ví dụ: nếu bạn chỉ sử dụng Inconsolata cho tiêu đề blog, bạn có thể đặt chính tiêu đề dưới dạng giá trị của text=. Yêu cầu sẽ có dạng như sau như:

https://fonts.googleapis.com/css?family=Inconsolata&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/css?family=Inconsolata&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ị dưới dạng:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Bật hiệu ứng phông chữ (Beta)

Khi tạo tiêu đề hoặc hiển thị văn bản trên trang web, bạn thường muốn cách điệu văn bản theo cách trang trí. Để đơn giản hoá công việc của bạn, Google đã cung cấp một bộ sưu tập hiệu ứng phông chữ mà bạn có thể dễ dàng sử dụng tạo ra văn bản hiển thị đẹp mắt. Ví dụ:

Đây là hiệu ứng phông chữ!

Để sử dụng tính năng beta này, bạn chỉ cần thêm effect= vào Google Fonts yêu cầu API và thêm tên lớp tương ứng vào(các) phần tử HTML mà bạn muốn tác động. Trong ví dụ trên, chúng ta đã sử dụng hiệu ứng phông chữ shadow-multiple, nên yêu cầu sẽ có dạng như sau:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Để sử dụng hiệu ứng này, hãy thêm tên lớp tương ứng vào(các) phần tử HTML. Chiến lược phát hành đĩa đơn tên lớp tương ứng luôn là tên hiệu ứng có tiền tố font-effect-, nên tên lớp cho shadow-multiple sẽ là font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Bạn có thể yêu cầu nhiều hiệu ứng bằng cách dùng dấu gạch đứng để phân tách tên hiệu ứng ký tự (|).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Dưới đây là danh sách đầy đủ tất cả hiệu ứng phông chữ mà chúng tôi cung cấp:

Hiệu quả	Tên API	Tên lớp	Hỗ trợ
Chữ tượng hình	`anaglyph`	`font-effect-anaglyph`	Chrome, Firefox, Opera, Safari
Biểu tượng gạch	`brick-sign`	`font-effect-brick-sign`	Chrome, Safari
Ảnh in trên vải canvas	`canvas-print`	`font-effect-canvas-print`	Chrome, Safari
Mở khoá	`crackle`	`font-effect-crackle`	Chrome, Safari
Suy giảm	`decaying`	`font-effect-decaying`	Chrome, Safari
Sự huỷ diệt	`destruction`	`font-effect-destruction`	Chrome, Safari
Đuối sức	`distressed`	`font-effect-distressed`	Chrome, Safari
Gỗ đau khổ	`distressed-wood`	`font-effect-distressed-wood`	Chrome, Safari
Biểu tượng nổi	`emboss`	`font-effect-emboss`	Chrome, Firefox, Opera, Safari
Hỏng	`fire`	`font-effect-fire`	Chrome, Firefox, Opera, Safari
Ảnh động về ngọn lửa	`fire-animation`	`font-effect-fire-animation`	Chrome, Firefox, Opera, Safari
Mỏng	`fragile`	`font-effect-fragile`	Chrome, Safari
Cỏ	`grass`	`font-effect-grass`	Chrome, Safari
Băng	`ice`	`font-effect-ice`	Chrome, Safari
Giảm phân	`mitosis`	`font-effect-mitosis`	Chrome, Safari
Neon	`neon`	`font-effect-neon`	Chrome, Firefox, Opera, Safari
Outline	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
Sử dụng công nghệ xanh	`putting-green`	`font-effect-putting-green`	Chrome, Safari
Thép cán	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome, Safari
Nhiều bóng	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
Chia mảnh	`splintered`	`font-effect-splintered`	Chrome, Safari
Tĩnh	`static`	`font-effect-static`	Chrome, Safari
Stonewash	`stonewash`	`font-effect-stonewash`	Chrome, Safari
Ba chiều	`3d`	`font-effect-3d`	Chrome, Firefox, Opera, Safari
Số thực ba chiều	`3d-float`	`font-effect-3d-float`	Chrome, Firefox, Opera, Safari
Cổ điển	`vintage`	`font-effect-vintage`	Chrome, Safari
Hình nền	`wallpaper`	`font-effect-wallpaper`	Chrome, Safari

Có nhiều cách khác để tạo kiểu cho phông chữ và cũng có thể thông qua CSS. Chúng tôi chỉ cung cấp một vài ý tưởng để giúp bạn bắt đầu. Để biết thêm ý tưởng, hãy thử tìm kiếm trên Google "hiệu ứng văn bản css" và hãy duyệt qua nhiều ý tưởng đã có trên web!

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 cách sử dụng Web Font Loader để bạn có nhiều quyền kiểm soát hơn đối với việc tải phông chữ.
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.