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

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

Nguồn tin: Xuanthulab