CSS Google Phông chữ
Phông chữ 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 liên kết biểu định kiểu đặc biệt trong phần <head> và sau đó tham khảo phông chữ trong CSS.
Thí 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
Thí 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
Thí 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
Lưu ý: Khi chỉ định một phông chữ trong CSS, hãy luôn liệt kê ít nhất một phông chữ dự phòng (để tránh các hành vi không mong muốn). Vì vậy, cũng ở đây, bạn nên thêm một 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ữ Google có sẵn, hãy truy cập Cách thực hiện - Hướng dẫn sử dụng Phông chữ Google của chúng tôi .
Sử dụng nhiều Phông chữ Google
Để sử dụng nhiều phông chữ Google, chỉ cần tách các tên phông chữ bằng ký tự ống dẫn ( |), như sau:
Thí 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
Lưu ý: Yêu cầu nhiều phông chữ có thể làm chậm các trang web của bạn! Vì vậy, hãy cẩn thận về điều đó.
Tạo kiểu cho Google Fonts
Tất nhiên, bạn có thể tạo kiểu Google Fonts theo ý muốn, bằng CSS!
Thí 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
Bậ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.
Đầu tiên hãy thêm vào API Google, sau đó thêm tên lớp đặc biệt cho phần tử sẽ sử dụng hiệu ứng đặc biệt. Tên lớp luôn bắt đầu bằng
và kết thúc bằng .effect=effectnamefont-effect-effectname
Thí 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
Để yêu cầu nhiều hiệu ứng phông chữ, chỉ cần tách các tên hiệu ứng bằng một ký tự ống ( |), như sau:
Thí 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