W3.CSS Phông chữ Google
Với W3.CSS, việc thêm các phông chữ mới vô cùng dễ dàng.
- Rất dễ sử dụng (chỉ CSS và HTML)
- Sử dụng không giới hạn các thư viện phông chữ bên ngoài (Như Google Phông chữ)
- Hoạt động trên tất cả các trình duyệt hiện đại
Đây là Roboto
Đây là Sofia
Sofia trên ngọn lửa
Tạo web!
Tạo web!
Tạo web!
Tạo web!
Tạo web!
Sử dụng Phông chữ của Google
Google Fonts được sử dụng miễn phí và có hơn 1000 phông chữ để bạn lựa chọn.
Trong phần đầu trang web của bạn, hãy liên kết đến một phông chữ Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Sau đó, thêm CSS về nơi sử dụng nó:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Một vi dụ khac
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Tạo một lớp phông chữ
Trong phần đầu trang web của bạn, hãy liên kết đến một phông chữ Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Sau đó, tạo một lớp phông chữ:
Thí dụ
.w3-sofia {
font-family: Sofia, cursive;
}
Trong trang web của bạn, hãy sử dụng loại phông chữ:
Thí dụ
<p class="w3-sofia">Making the Web!</p>
Tạo web!
Thí dụ
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Tạo web!
Thí dụ
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Tạo web!
Thí dụ
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Tạo web!
Thí dụ
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Tạo web!