Liên hệ
css

Thuộc tính font-family CSS

Sử dụng thuộc tính font-family trong CSS để thiết lập font chữ hiện thị cho các phần tử HTML

font-family

Thuộc tính font-family được dùng để chỉ ra font cho phần tử. Có hai kiểu tên font:

  • font family chỉ ra font family ví dụ Times New Roman hoặc Arial
  • generic family nhóm các font family có cách hiện thị tương tự nhau ví dụ Serif, Monospace
generic family font family
Serif Times New Roman
Georgia
Sans-serif Arial
Verdana
Monospace Courier New
Lucida Console

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

Vui lòng đăng ký ủng hộ kênh