HTML/CSS | Font-family là gì?

Học HTML, CSS từ Zero Tới Hero

• Cú pháp sử dụng
• Phân loại
• Thứ tự ưu tiên

Cú pháp sử dụng

Font-family được hiểu nôm na là họ phông (font). Thuộc tính font-family được sử dụng để chỉ định font chữ cho trang web.

Cú pháp:

p {
  font-family: Arial, Helvetica, sans-serif;
}

Giá trị của thuộc tính font-family có thể là phông chữ theo tên hoặc họ phông chữ chung và có thể có cùng lúc nhiều phông chữ khác nhau.

Ví dụ:

<style>
p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

<h1>The font-family Property</h1>

<p class="a">This paragraph is shown in the Times New Roman font.</p>

<p class="b">This paragraph is shown in the Arial font.</p>

Mỗi họ phông chữ cần được cách nhau bởi dấu phẩy. Nếu họ phông chữ chứa khoảng trắng, phông chữ đó cần được đặt trong dấu ngoặc kép.

Phân loại

Họ phông chữ được chia làm 2 loại:

• Họ phông theo tên - family-name: Arial, Helvetica, Times New Roman, v.v.
• Họ phông chữ chung - generic-family: serif, sans-serif, cursive, monospace, v.v.

Thứ tự ưu tiên

Vốn dĩ thuộc tính font-family có nhiều phông chữ cùng một lúc là để “dự phòng” trong trường hợp trình duyệt không hỗ trợ. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, phông chữ thứ hai sẽ được sử dụng và cứ lần lượt như thế.

Ví dụ sau:

body {
    font-family: "Helvetica", sans-serif;
}

Trong trường hợp trình duyệt không tìm thấy phông “Helvetica”, trình duyệt sẽ sử dụng font chữ thuộc họ phông sans-serif mặc định.

Tóm tắt

• Font-family là họ phông chữ, bao gồm 2 loại:
  • Họ phông chữ theo tên: Arial, Helvetica, Times New Roman, v.v.
  • Họ phông chữ chung: serif, sans-serif, cursive, monospace, v.v.
• Thuộc tính font-family dùng để chỉ định font chữ cho trang web, có thể có nhiều họ phông chữ cùng lúc.
• Mỗi họ phông chữ cần được cách nhau bởi dấu phẩy. Nếu họ phông chữ chứa khoảng trắng, phông chữ đó cần được đặt trong dấu ngoặc kép.
• Trình duyệt sẽ luôn lấy họ phông chữ đầu tiên, nếu không được hỗ trợ sẽ lấy tiếp họ phông chữ thứ 2 và lần lượt như thế.