bài 13. Font chữ trong CSS (CSS Fonts)

Thuộc tính font chữ trong CSS xác định loại chữ chữ, độ đậm, kích thước và kiểu của văn bản

Chúng ta hãy cùng xem ví dụ đầu tiên

Sự khác biệt giữa phông chữ Serif và Sans-serif

Nội dung

Một số khái niệm

• Generic family (hay có thể gọi là nhóm phông chữ chung) là 1 nhóm phông chữ có giao diện tương tự  (như “Serif” hoặc “Monospace”)
• Họ phông chữ. name 1 font chữ cụ thể (chẳng hạn như “Times New Roman” hoặc “Arial”)

Lưu ý. Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif

Font-Family (phông chữ)

Phông chữ của một văn bản được đặt với thuộc tính_______11_______

Thuộc tínhfont-family nên giữ nhiều tên phông chữ như một hệ thống “dự phòng”. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v. v

Bắt đầu với 1 phông chữ bạn muốn và kết thúc là đặt tên cho 1 nhóm phông chữ chung (generic family), để cho phép trình duyệt chọn một phông chữ tương tự trong nhóm đó, nếu không có phông chữ nào khác

Lưu ý. Nếu tên của một phông chữ có nhiều hơn một từ, thì nó phải nằm trong dấu ngoặc kép, như. "Times New Roman"

Nếu có nhiều chữ chữ chỉ được định nghĩa trong danh sách, chúng sẽ được phân tách bằng dấu phẩy

Ví dụ

p {
  font-family: "Times New Roman", Times, serif;
}

Kiểu chữ (Kiểu chữ)

Thuộc tính font-style được sử dụng chủ yếu để chỉ định văn bản theo hướng nghiêng

Thuộc tính này có 3 giá trị như sau

• bình thường – Văn bản được hiển thị bình thường
• italic – Văn bản được in nghiêng
• oblique – Văn bản được in nghiêng (giá trị này ít được hỗ trợ bởi trình duyệt)

Ví dụ

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Cỡ chữ (Cỡ chữ)

Thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Tuy nhiên, bạn không nên sử dụng thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Hãy sử dụng các thẻ HTML thích hợp, như

–

cho các tiêu đề và

cho các đoạn văn.

Kích thước phông chữ có thể là một kích thước tuyệt đối hoặc tương đối

đối kích thước tuyệt vời

• Set text to a default size
• Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (xấu vì lý do truy cập)
• Kích thước tuyệt đối hữu ích khi biết kích thước vật lý của đầu ra

Convers size

• Đặt kích thước tương ứng với các yếu tố xung quanh
• Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt

Lưu ý. Nếu bạn không chỉ định kích thước phông chữ, kích thước sẽ mặc định cho văn bản thông thường, chẳng hạn như đoạn văn bản là 16px (16px = 1em)

---

Set letter size by pixel

Đặt kích thước văn bản bằng pixel cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản

Ví dụ

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Nếu bạn sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để thay đổi kích thước toàn bộ trang

Set letter size with Em

Để cho phép người dùng thay đổi kích thước văn bản (trong menu trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel

1em equal to the current font size at. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, default size of 1em is 16px

Kích thước có thể được tính từ pixel đến em bằng công thức này. pixel / 16 = em

Ví dụ

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt

Sử dụng kết hợp phần trăm và em

Để có thể hoạt động trong tất cả các trình duyệt: đặt kích thước phông chữ cho phần tử theo phần trăm :

Ví dụ

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

việc sử dụng kết hợp sẽ giúp hiển thị cùng kích thước văn bản trong tất cả các trình duyệt và cho phép tất cả các trình duyệt duyệt hoặc thay đổi kích thước văn bản

Trọng lượng phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Ví dụ

Responsive Font Size (Cỡ chữ tương thích)

Kích thước văn bản có thể được đặt bằng đơn vị

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Bằng cách đó, kích thước văn bản sẽ theo kích thước của cửa sổ duyệt

Ví dụ

1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm thì 1vw là 0,5cm

Biến thể phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}