Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Quy tắc CSS @font-face - nhúng font tùy chỉnh

Quy tắc @font-face trong CSS

Quy tắc @font-face cho phép **nhúng font tùy chỉnh (web fonts)** vào trang web, tải font từ server thay vì phụ thuộc vào font cài đặt trên máy người dùng. Đây là cơ sở của typography hiện đại trên web.

Cú pháp cơ bản

@font-face {
  font-family: 'TênFontCủaBạn';     /* Tên dùng trong font-family */
  src: url('đường_dẫn_font.woff2') format('woff2'),
       url('đường_dẫn_font.woff') format('woff');
  font-weight: normal;              /*Trọng số: normal, bold, 100-900*/
  font-style: normal;               /*Kiểu: normal, italic, oblique*/
  font-display: swap;               /*Hiển thị khi font đang tải*/
}

Các descriptor quan trọng

Descriptor Chức năng
font-family Tên định danh (bắt buộc)
src Đường dẫn file font + format (bắt buộc)
font-weight Trọng số (100-900, normal, bold)
font-style Kiểu chữ (normal, italic, oblique)
font-display Chiến lược hiển thị: auto, block, swap, fallback, optional
unicode-range Phạm vi ký tự Unicode (tối ưu tải font)

Ví dụ thực tế (Best Practice 2024)

/* Font Latin cơ bản */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font tiếng Việt (Extended Latin) */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-vietnamese.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* Sử dụng */
body { font-family: 'Inter', system-ui, sans-serif; }

Định dạng font khuyến nghị

  1. WOFF2 - Tốt nhất (nén tốt, hỗ trợ rộng rãi)
  2. WOFF - Dự phòng cho trình duyệt cũ
  3. Tránh TTF/OTF/EOT/SVG (kích thước lớn, cũ)

Font-display values

  • swap (khuyến nghị): Dùng font hệ thống ngay, swap khi font tải xong - tránh FOIT (Flash of Invisible Text)
  • optional: Chỉ dùng font web nếu tải rất nhanh, không thì dùng font hệ thống
  • fallback: Chờ ~100ms, nếu chưa tải xong thì dùng font hệ thống