CSS - Fonts: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của phông chữ trong CSS. Là người thầy thân thiện trong lĩnh vực máy tính, tôi sẽ dẫn đường cho các bạn từng bước một. Nào, hãy cầm một tách cà phê (hoặc trà, nếu bạn thích thế) và cùng bắt đầu nhé!

Giới thiệu về phông chữ trong CSS

Trước khi chúng ta đi vào chi tiết, hãy nói về tầm quan trọng của phông chữ. Hãy tưởng tượng bạn đang đọc một cuốn sách viết hoàn toàn bằng Comic Sans - không phải là trải nghiệm dễ chịu phải không? Đó là lý do tại sao việc chọn phông chữ phù hợp cho website của bạn lại quan trọng. Nó giống như việc chọn trang phục hoàn hảo cho buổi hẹn đầu tiên - bạn muốn để lại ấn tượng tốt!

Phông chữ CSS viết tắt

Hãy bắt đầu với một thủ thuật nhỏ gọi là viết tắt phông chữ. Nó giống như một cây kéo đa năng cho việc thiết kế phông chữ - gọn nhẹ và linh hoạt!

body {
  font: italic small-caps bold 16px/2 Arial, sans-serif;
}

Dòng này thiết lập nhiều thuộc tính phông chữ cùng một lúc. Hãy phân tích nó:

• italic: Kiểu phông chữ
• small-caps: Biến thể phông chữ
• bold: Độ đậm phông chữ
• 16px: Kích thước phông chữ
• 2: Chiều cao dòng
• Arial, sans-serif: Gia đình phông chữ

Thật tuyệt vời phải không? Nó giống như việc đặt một combo thay vì các món ăn riêng lẻ!

Phông chữ CSS - Với nhiều giá trị

Đôi khi, một phông chữ thôi không đủ. Đó là lúc nhiều giá trị trở nên hữu ích:

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

Đây giống như việc có một kế hoạch dự phòng. Nếu "Trebuchet MS" không có sẵn, nó sẽ thử Verdana, và nếu Verdana cũng không có, nó sẽ sử dụng bất kỳ phông chữ sans-serif nào có sẵn.

Phông chữ CSS - Gia đình phông chữ

Nói về gia đình phông chữ, hãy đi sâu hơn một chút:

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

Ở đây, chúng ta đang sử dụng các gia đình phông chữ khác nhau cho tiêu đề và đoạn văn. Nó giống như việc mặc một bộ suit sang trọng cho tiêu đề trong khi giữ đoạn văn ở phong cách smart casual!

Phông chữ CSS - Cài đặt tính năng phông chữ

Bây giờ, hãy thử một số tính năng phông chữ đặc biệt:

p {
  font-feature-settings: "smcp" on, "swsh" 2;
}

Điều này kích hoạt small caps và đặt swash ở mức 2. Nó giống như việc cho phông chữ của bạn siêu năng lực!

Phông chữ CSS - Với thuộc tính font-feature-settings

Hãy xem một ví dụ khác về cài đặt tính năng phông chữ:

.stylish-text {
  font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

Điều này kích hoạt các ligature tiêu chuẩn, ligature tùy chọn và ligature lịch sử. Nó giống như việc biến văn bản của bạn thành một kiệt tác thư pháp!

Phông chữ CSS - Kerning

Kerning là về khoảng cách giữa các ký tự:

.kerned-text {
  font-kerning: normal;
}

Điều này đảm bảo khoảng cách chính xác giữa các chữ cái. Nó giống như việc cho văn bản của bạn không gian để thở!

Phông chữ CSS - Thay thế ngôn ngữ

Đôi khi, bạn cần thay thế cài đặt ngôn ngữ:

.japanese-text {
  font-language-override: "JAN";
}

Điều này yêu cầu trình duyệt sử dụng các biến thể glyph đặc trưng của Nhật Bản. Nó giống như việc bảo văn bản của bạn nói tiếng Nhật!

Phông chữ CSS - Tích hợp kích thước thị giác

Tích hợp kích thước thị giác điều chỉnh phông chữ dựa trên kích thước của nó:

.headline {
  font-optical-sizing: auto;
}

Điều này cho phép phông chữ tối ưu hóa ngoại hình của nó ở các kích thước khác nhau. Nó giống như việc có một phông chữ có thể thay đổi hình dạng!

Phông chữ CSS - Bảng màu phông chữ

Bảng màu phông chữ cho phép bạn sử dụng các bảng màu đã xác định:

@font-palette-values --custom-palette {
  font-family: Pixelify Sans;
  base-palette: 1;
}

.colored-text {
  font-palette: --custom-palette;
}

Điều này áp dụng một bảng màu tùy chỉnh cho phông chữ. Nó giống như việc cho văn bản của bạn một cuộc cải trang!

Phông chữ CSS - Kích thước phông chữ

Kích thước phông chữ rất đơn giản:

body {
  font-size: 16px;
}
h1 {
  font-size: 2em;
}

Ở đây, chúng ta đặt kích thước cơ bản cho thân bài và làm tiêu đề lớn gấp đôi. Nó giống như việc có một bình nước tăng trưởng cho văn bản của bạn!

Phông chữ CSS - Điều chỉnh kích thước phông chữ

Điều chỉnh kích thước phông chữ giúp duy trì khả năng đọc qua các phông chữ khác nhau:

.adjusted-text {
  font-size-adjust: 0.5;
}

Điều này điều chỉnh kích thước phông chữ dựa trên chiều cao x. Nó giống như việc cho văn bản của bạn một đôi giày cao gót!

Phông chữ CSS - Mở rộng phông chữ

Mở rộng phông chữ cho phép bạn nén hoặc giãn phông chữ:

.stretched-text {
  font-stretch: extra-expanded;
}

Điều này làm cho văn bản của bạn rộng hơn. Nó giống như việc văn bản của bạn đã đến phòng tập và tăng cơ!

Phông chữ CSS - Với thuộc tính font-style

Thuộc tính font-style cho phép bạn nghiêng văn bản:

.emphasized {
  font-style: italic;
}

Điều này làm cho văn bản của bạn nghiêng. Nó giống như văn bản của bạn đang nghiêng vào để thì thầm một bí mật!

Phông chữ CSS - Với thuộc tính font-weight

Thuộc tính font-weight kiểm soát độ đậm của văn bản:

.important {
  font-weight: bold;
}

Điều này làm cho văn bản của bạn nổi bật. Nó giống như văn bản của bạn đang căng cơ bắp!

Phông chữ CSS - Với thuộc tính font-synthesis

Thuộc tính font-synthesis kiểm soát việc tạo ra các phiên bản đậm hoặc nghiêng của phông chữ:

.no-fake-bold {
  font-synthesis: none;
}

Điều này ngăn trình duyệt tạo ra một phiên bản đậm giả. Nó giống như việc bảo trình duyệt, "Đừng giả vờ đến khi bạn thực sự làm được!"

Phông chữ CSS - Với thuộc tính font-variant

Thuộc tính font-variant cho phép bạn sử dụng các glyph thay thế:

.smallcaps {
  font-variant: small-caps;
}

Điều này chuyển các chữ cái thường thành chữ cái nhỏ in hoa. Nó giống như văn bản của bạn đang mặc một bộ tuxedo nhỏ!

Phông chữ CSS - Với thuộc tính font-variation-settings

Thuộc tính font-variation-settings cho phép bạn kiểm soát các đặc tính của phông chữ biến thể:

.custom-font {
  font-variation-settings: "wght" 375, "wdth" 80;
}

Điều này đặt các giá trị tùy chỉnh cho trọng lượng và chiều rộng. Nó giống như việc có một bộ suit đo尺寸 cho văn bản của bạn!

Chiều cao dòng CSS

Chiều cao dòng kiểm soát khoảng cách giữa các dòng văn bản:

p {
  line-height: 1.5;
}

Điều này đặt chiều cao dòng là 1.5 lần kích thước phông chữ. Nó giống như việc cho văn bản của bạn không gian để duỗi chân!

Phông chữ CSS - Google Fonts

Google Fonts là kho báu của các phông chữ miễn phí, thân thiện với web:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

Điều này nhập và sử dụng phông chữ Roboto. Nó giống như việc có một nhà thiết kế phông chữ cá nhân!

Phông chữ CSS - Phông chữ dự phòng

Luôn cung cấp phông chữ dự phòng:

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Điều này đảm bảo văn bản của bạn luôn trông đẹp, ngay cả khi phông chữ ưa thích của bạn không có sẵn. Nó giống như việc có một kế hoạch dự phòng cho kế hoạch dự phòng của bạn!

Phông chữ CSS - Tóm tắt

Dưới đây là tóm tắt nhanh về tất cả các thuộc tính phông chữ chúng ta đã covered:

Thuộc tính	Mô tả	Ví dụ
font	Viết tắt cho nhiều thuộc tính phông chữ	font: italic bold 16px/2 Arial, sans-serif;
font-family	Xác định gia đình phông chữ	font-family: Arial, sans-serif;
font-feature-settings	Điều khiển các tính năng typographic nâng cao	font-feature-settings: "smcp" on;
font-kerning	Điều khiển kerning phông chữ	font-kerning: normal;
font-language-override	Thay thế cài đặt ngôn ngữ	font-language-override: "JAN";
font-optical-sizing	Điều chỉnh kích thước thị giác	font-optical-sizing: auto;
font-palette	Xác định bảng màu phông chữ	font-palette: --custom-palette;
font-size	Đặt kích thước phông chữ	font-size: 16px;
font-size-adjust	Điều chỉnh kích thước phông chữ dựa trên x-height	font-size-adjust: 0.5;
font-stretch	Điều khiển mở rộng phông chữ	font-stretch: extra-expanded;
font-style	Đặt kiểu phông chữ (normal, italic, oblique)	font-style: italic;
font-weight	Đặt độ đậm phông chữ	font-weight: bold;
font-synthesis	Điều khiển tổng hợp phông chữ	font-synthesis: none;
font-variant	Xác định biến thể phông chữ	font-variant: small-caps;
font-variation-settings	Điều khiển đặc tính phông chữ biến thể	font-variation-settings: "wght" 375;
line-height	Đặt chiều cao dòng	line-height: 1.5;

Và thế là xong, các bạn! Hướng dẫn chi tiết về phông chữ trong CSS. Nhớ rằng, typography là một nghệ thuật, và bây giờ bạn đã có công cụ để trở thành một nghệ sĩ thực thụ. Chúc các bạn may mắn và字体 của bạn luôn tuyệt vời!

Credits: Image by storyset