Các thuộc tính Font (Phông chữ) trong CSS

Các thuộc tính font trong CSS cho phép chúng ta sửa đổi giao diện của văn bản. Các thuộc tính sau giúp chúng ta định dạng văn bản:

• font-family - Đặt mặt phông chữ cho phần tử
• font-kerning - Làm cho khoảng cách ký tự đều đặn, tăng khả năng đọc (đặc thù font)
• font-size - Đặt kích thước phông chữ
• font-stretch - Chỉ định các mặt phông chữ bổ sung như condensed, expanded (nếu font hỗ trợ)
• font-style - In nghiêng văn bản theo góc (normal, italic, oblique)
• font-variant - Chỉ định hiển thị small-caps (chữ hoa nhỏ) hay không
• font-weight - Độ đậm của ký tự (normal, bold, 100-900)

Chúng ta cũng có thể dùng thuộc tính shorthand font cho tất cả các thuộc tính trên.

Cú pháp font shorthand

Selector {
  font: /*value*/
}

Thứ tự: font-style font-variant font-weight font-size/line-height font-family

Ví dụ 1: font-style (normal, italic, oblique)

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin: 3px; float: left; font-family: "Matura MT Script Capitals"; font-size: 200%; }
  #a { font-style: normal; }
  #b { font-style: italic; }
  #c { font-style: oblique 40deg; font-family: "Harlow Solid Italic"; }
</style>
</head>
<body>
  <div id="a">Normal Demo</div>
  <div id="b">Italic Demo</div>
  <div id="c">Oblique Demo</div>
</body>
</html>

Kết quả

Ví dụ 2: Các font-family khác nhau cho list items

<!DOCTYPE html>
<html>
<head>
<style>
  * { font-size: 1.1em; list-style: circle; }
  li:first-child { background-color: seashell; font-family: cursive; }
  li:nth-child(2) { background-color: azure; font-family: "Brush Script Std", serif; }
  li:last-child { background-color: springgreen; font-family: "Gigi", Arial; }
</style>
</head>
<body>
  <h2>Learning Scala</h2>
  <ul>
    <li>Scala is a pure object-oriented language in the sense that every value is an object.</li>
    <li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li>
    <li>Scala provides a lightweight syntax for defining anonymous functions</li>
  </ul>
</body>
</html>

Kết quả

Giá trị font-weight:

• normal = 400
• bold = 700
• bolder, lighter - tương đối so với cha
• 100 - 900 (bước 100) - Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold, Black

Lưu ý: Không phải font nào cũng hỗ trợ đầy đủ 9 mức weight. Kiểm tra font trước khi dùng.