Thuộc tính font-family trong CSS
font-family: serif; font-family: namefont1, namefont2;
Thuộc tính font-family được dùng để chỉ ra font chữ (có thể là một danh sách font chữ) cho phần tử. Nếu thiết lập nhiều font chữ thì các font được liệt kê cách nhau bởi dấu phảy (,)
Khi một phần tử thiết lập nhiều font chữ bởi thuộc tính css font-family, trình duyệt sẽ tìm các font đó trên hệ thống đang chạy (ưu tiên từ trái qua phải), thấy font chữ nào thì dùng font chữ đó, điều này đảm bảo trang web có thể hiện thị phù hợp trên nhiều loại máy (Windows, mac, Android ...) khi hệ thống font chữ nó khác nhau tuỳ theo hệ thống. Ví dụ:
p {
font-family: Arial, Helvetica, sans-serif;
}
/*
Font chữ cho phần tử <p> là: Arial nếu thấy có trong hệ thống, nếu không có
thì dùng Helvetica, nếu cũng không có Helvetica
thì dùng font dạng generic : sans-serif
*/
Các tên font trong CSS
Các tên font bạn có thể thiết lập cho thuôc tính font-family có thể là tên các font family hoặc tên các generic family.
- font family name : Là tên font chữ cụ thể có thể có trong hệ thống, hoặc tên font do bạn nạp vào từ file font chữ (sử dụng quy tắc @font-face - sẽ trình bày sau), ví dụ font chữ Times New Roman, Arial, Roboto ...
- generic family name : Các font chữ có hình thức gần giống nhau được
xếp vào một nhóm, tên nhóm này gọi là generic family name.
Mỗi font chữ cụ thể nó sẽ thuộc một nhóm nào đó. Có các nhóm:
serif, sans-serif, cursive, fantasy, monospace.
Dùng generic để đảm bảo tương thích ngược, ví dụ nếu thiết lập
font-family: sans-serif;thì trình duyệt sẽ tìm trên hệ thống các font thuộc nhóm sans-serif, và sử dụng một font đầu tiên nó tìm thấy.
Bảng sau cho biết các tên font generic và tương ứng một vài font cụ thể thuộc nhóm đó. Có hiện thị theo từng loại font để bạn nhậm biết hình thức font thể hiện
| Generic family | Font family |
|---|---|
|
Serif Nhóm các font chữ sử dụng ít nét trang trí (chân chữ) vượt ra ngoài thân chữ. Loại font này dễ đọc, dễ in - điển hình là Times New Roman |
Times New Roman Georgia Palatino Baskerville |
|
Sans-serif Nhóm font không sử dụng nét trang trí (không chân), loại này dễ đọc nhất trên màn hình, nên nó phổ biến nhất cho các website. Font điển hình là arial. |
Arial Arial Black Verdana Tahoma Impact Gill Sans |
|
Monospace Nhóm các font mà khoảng cách các chữ đều bằng nhau. Font điển hình Courier |
Courier New Lucida Console Andalé Mono Courier Lucida Monaco |
|
Cursive Nhóm font chữ có độ cong mềm giống chữ viết tay. |
Bradley Hand Brush Script MT Comic Sans MS |
|
Fantasy Nhóm các font chữ nghệ thuật, cách điệu. |
Luminari |
Trong thực hành luôn thiết lập sau các font family là đến generic tương ứng, đề phòng trên một máy cụ thể không có font đó, trình duyệt sẽ lấy font generic tương ứng (luôn có) để áp dụng
Ví dụ có HTML như sau:
<p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p>
Giờ dùng CSS để thiết lập font chữ cho các đoạn văn trên
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Helvetica, Arial, sans-serif;
}
p.monospace {
font-family: "Courier New", Courier, monospace;
}
p.cursive {
font-family: Florence, cursive;
}
p.fantasy {
font-family: Blippo, fantasy;
}
</style>
Kết quả:
This is a paragraph shown in serif font.
This is a paragraph shown in sans-serif font.
This is a paragraph shown in monospace font.
This is a paragraph shown in cursive font.
This is a paragraph shown in fantasy font.
Lưu ý các giá trị trong font-family cách nhau bằng dấu , các giá trị này được trình duyệt sử dụng thay thế nhau.
Nếu font thứ nhất tìm không ra, nó sử dụng font tiếp theo ...
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
