Variable fonts là gì?

Variable font là một file chứa cả một trục biến thiên (độ đậm, độ rộng, độ nghiêng) thay vì mỗi kiểu một file riêng.

@font-face {
  font-family: 'Inter var';
  src: url('/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900;      /* khai báo KHOẢNG, không phải một giá trị */
  font-display: swap;
}

.title { font-weight: 640; }      /* giá trị bất kỳ trong khoảng, không chỉ 600/700 */
.title:hover { font-weight: 700; transition: font-weight 0.18s; }  /* chuyển mượt */

Các trục chuẩn: wght (weight), wdth (width), slnt (slant), ital (italic), opsz (optical size).

Trục riêng của từng font truy cập qua:

.custom { font-variation-settings: 'wght' 640, 'opsz' 32; }

Lợi ích thật: một dự án dùng 4 độ đậm × 2 kiểu nghiêng = 8 file với font tĩnh; variable font là 1 file, thường nhỏ hơn tổng đó và chỉ tốn một request.

Lưu ý 1: variable font không phải lúc nào cũng nhẹ hơn. Nếu chỉ dùng đúng 1–2 độ đậm, file tĩnh subset còn nhỏ hơn. Nó thắng khi cần nhiều biến thể.

Lưu ý 2: ưu tiên font-weight, font-stretch chuẩn hơn là font-variation-settings — thuộc tính chuẩn kế thừa và animate đúng cách, còn font-variation-settings ghi đè toàn bộ và không kế thừa từng trục.