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:
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:
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:
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">
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ụ:
Để 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 |
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
- Xem danh sách đầy đủ các bộ phông chữ do API Google Fonts cung cấp trên Google Fonts.
- Tìm hiểu cách sử dụng Trình tải phông chữ trên web để kiểm soát tốt hơn việc tải phông chữ.
- Tìm hiểu thêm về cách hoạt động của API Google Fonts trên trang Các yếu tố cần cân nhắc về kỹ thuật.