Phông chữ Google W3.CSS
Với W3.CSS, việc thêm phông chữ mới cực kỳ dễ dàng.
- Rất dễ sử dụng (chỉ CSS và HTML)
- Sử dụng không giới hạn thư viện phông chữ bên ngoài (Giống như Google Fonts)
- Hoạt động trong tất cả các trình duyệt hiện đại
Đây là Roboto
Đây là Sofia
Sofia bốc cháy
Làm web!
Làm web!
Làm web!
Làm web!
Làm 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.
Ở phần đầu trang web của bạn, liên kết tới 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;}
Hãy tự mình thử »Một vi dụ khac
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Hãy tự mình thử »Tạo một lớp phông chữ
Ở phần đầu trang web của bạn, liên kết tới phông chữ Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
Sau đó tạo một lớp phông chữ:
Ví dụ
.w3-sofia {
font-family: Sofia, cursive;
}
Trong trang web của bạn, hãy sử dụng lớp phông chữ:
Ví 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>
Hãy tự mình thử »Ví dụ
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Hãy tự mình thử »Ví dụ
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Hãy tự mình thử »Ví dụ
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Hãy tự mình thử »