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

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

Ví dụ nhanh

Dưới đây là một ví dụ. Sao chép và dán HTML sau vào 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ị nội dung sau, với phông chữ có tên Tangerine:

Làm đẹp trang web!

Câu đó là văn bản thông thường, vì vậy, bạn có thể thay đổi giao diện của câu bằng cách sử dụng CSS. Hãy 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 trang web!

Và đó chỉ là khởi đầu của 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 API Google Fonts chỉ qua hai bước:

  1. Thêm một đường liên kết đến biểu định kiểu để yêu cầu(các) phông chữ web mong muốn: 

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. Tạo kiểu cho một phần tử bằng phông chữ web được yêu cầu, trong 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>

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

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

Để xác định URL sẽ sử dụng trong đường liên kết đến biểu định kiểu của bạn, hãy bắt đầu với URL cơ sở của API Google Fonts:

https://fonts.googleapis.com/css

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

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 các tên bằng một dấu gạch đứng (|).

Ví dụ: để yêu cầu phông chữ Tangerine, 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 có thể sử dụng tất cả các phông chữ đó trên trang của mình. (Nhưng đừng quá lo lắng; hầu hết các trang không cần quá nhiều phông chữ và việc yêu cầu nhiều phông chữ có thể khiến trang tải chậm.)

Theo mặc định, API Google Fonts cung cấp phiên bản thông thường của các phông chữ được yêu cầu. Để 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 phông chữ, theo sau là danh sách kiểu hoặc trọng số đượ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 những kiểu và độ đậm có sẵn cho một phông chữ nhất định, hãy xem trang thông tin của phông chữ trong Google Fonts.

Đối với mỗi kiểu được yêu cầu, bạn có thể cung cấp tên đầy đủ hoặc chữ 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ố
in nghiêng italic hoặc i
đậm bold hoặc b hoặc trọng số bằng số, chẳng hạn như 700
đậm nghiêng bolditalic hoặc bi

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

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 phông chữ

font-display cho phép bạn kiểm soát những gì sẽ xảy ra khi không có phông chữ. Việc chỉ định một giá trị khác với auto mặc định thường là thích hợp.

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

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

Chỉ định các tập lệnh con

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

Ví dụ: để yêu cầu tậ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 tiếng 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 của 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 Latinh luôn được đưa vào nếu có và không cần chỉ định. Xin lưu ý rằng nếu trình duyệt ứng dụng hỗ trợ unicode-range (http://caniuse.com/#feat=font-unicode-range) thì thông số tập hợp con sẽ bị bỏ qua; trình duyệt sẽ chọn trong số các tập hợp con được phông chữ hỗ trợ để nhận được những gì cần thiết để 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ữ hiện có, vui lòng xem Google Fonts.

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 sẽ biết trước chữ cái nào mình cần. Điều này thường xảy ra khi bạn dùng phông chữ trên 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 việc chỉ định giá trị text= trong URL yêu cầu phông chữ của mình. Thao tác này cho phép Google 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, thao tác 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 các yêu cầu API Google Fonts. Ví dụ: nếu chỉ sử dụng Inconsolata cho tiêu đề blog, bạn có thể đặt chính tiêu đề này làm giá trị của text=. Yêu cầu sẽ có dạng như sau:

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

Giống như với tất cả cá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 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ị là:

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ùng rất dễ dàng để tạo 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 yêu cầu API Google Fonts 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 tôi đã sử dụng hiệu ứng phông chữ shadow-multiple, do đó, 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. Tên lớp tương ứng luôn là tên hiệu ứng có tiền tố font-effect-, vì vậy, 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 phân tách các tên hiệu ứng bằng ký tự gạch đứng (|).

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ợ
Thêm chú thích anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Biển báo 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
CẮT crackle font-effect-crackle Chrome, Safari
Đang giảm dần decaying font-effect-decaying Chrome, Safari
Sự huỷ diệt destruction font-effect-destruction Chrome, Safari
Cảm giác đau khổ distressed font-effect-distressed Chrome, Safari
Gỗ chịu áp lực distressed-wood font-effect-distressed-wood Chrome, Safari
Emboss emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Lửa fire font-effect-fire Chrome, Firefox, Opera, Safari
Ảnh động ngọn lửa fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Dễ bị tổn thương fragile font-effect-fragile Chrome, Safari
Cỏ grass font-effect-grass Chrome, Safari
Băng ice font-effect-ice Chrome, Safari
Giảm thiểu lượng mitosis font-effect-mitosis Chrome, Safari
Neon neon font-effect-neon Chrome, Firefox, Opera, Safari
Outline outline font-effect-outline Chrome, Firefox, Opera, Safari
Đổi mới putting-green font-effect-putting-green Chrome, Safari
Thép cuộn scuffed-steel font-effect-scuffed-steel Chrome, Safari
Bóng nhiều shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Chia nhỏ splintered font-effect-splintered Chrome, Safari
Tĩnh static font-effect-static Chrome, Safari
Hiệu ứng rửa đá stonewash font-effect-stonewash Chrome, Safari
Ba chiều 3d font-effect-3d Chrome, Firefox, Opera, Safari
Độ nổi 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ó thể thực hiện nhiều điều thông qua CSS. Chúng tôi chỉ cung cấp một số ý tưởng để giúp bạn bắt đầu. Để có thêm ý tưởng, hãy thử tìm "hiệu ứng văn bản css" trên Google và duyệt qua nhiều ý tưởng đã có trên web!

Tài liệu đọc thêm