Cascading Style Sheets

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;
}

Đăng ký nhận bài viết mới