Phông chữ CSS của Google
Phông chữ của Google
Nếu bạn không muốn sử dụng bất kỳ phông chữ tiêu chuẩn nào trong HTML, bạn có thể sử dụng Google Fonts.
Google Fonts được sử dụng miễn phí và có hơn 1000 phông chữ để bạn lựa chọn.
Cách sử dụng phông chữ của Google
Chỉ cần thêm một liên kết biểu định kiểu đặc biệt vào phần <head> rồi tham khảo phông chữ trong CSS.
Ví dụ
Ở đây, chúng tôi muốn sử dụng phông chữ có tên "Sofia" từ Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Kết quả:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Hãy tự mình thử »Ví dụ
Ở đây, chúng tôi muốn sử dụng phông chữ có tên "Trirong" từ Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Kết quả:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Hãy tự mình thử »Ví dụ
Ở đây, chúng tôi muốn sử dụng phông chữ có tên "Audiowide" từ Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Kết quả:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Hãy tự mình thử »Lưu ý: Khi chỉ định phông chữ trong CSS, hãy luôn liệt kê tối thiểu một phông chữ dự phòng (để tránh các hành vi không mong muốn). Vì vậy, ở đây bạn cũng nên thêm họ phông chữ chung (như serif hoặc sans-serif) vào cuối danh sách.
Để biết danh sách tất cả các Phông chữ có sẵn của Google, hãy truy cập Cách thực hiện - Hướng dẫn về Phông chữ của Google .
Sử dụng nhiều phông chữ của Google
Để sử dụng nhiều phông chữ của Google, chỉ cần phân tách tên phông chữ bằng ký tự ống dẫn ( |
), như thế này:
Ví dụ
Yêu cầu nhiều phông chữ:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Kết quả:
Audiowide Font
Sofia Font
Trirong Font
Hãy tự mình thử »Lưu ý: Yêu cầu nhiều phông chữ có thể làm chậm trang web của bạn! Vì vậy hãy cẩn thận về điều đó.
Tạo kiểu cho phông chữ Google
Tất nhiên, bạn có thể tạo kiểu cho Google Fonts theo ý muốn bằng CSS!
Ví dụ
Tạo kiểu cho phông chữ "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Kết quả:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Hãy tự mình thử »Kích hoạt hiệu ứng phông chữ
Google cũng đã kích hoạt các hiệu ứng phông chữ khác nhau mà bạn có thể sử dụng.
Trước tiên, hãy thêm effect= effectname
vào Google API, sau đó thêm tên lớp đặc biệt vào thành phần sẽ sử dụng hiệu ứng đặc biệt. Tên lớp luôn bắt đầu bằng font-effect-
và kết thúc bằng effectname
.
Ví dụ
Thêm hiệu ứng lửa vào phông chữ "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Kết quả:
Sofia on Fire
Hãy tự mình thử » Để yêu cầu nhiều hiệu ứng phông chữ, chỉ cần phân tách tên hiệu ứng bằng ký tự ống dẫn ( |
), như thế này:
Ví dụ
Thêm nhiều hiệu ứng cho phông chữ "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Kết quả:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect
Hãy tự mình thử »