4 bước để sử dụng phông chữ biến

Sep 14, 2025

Cách

(Tín dụng hình ảnh: Tương lai)

Phông chữ biến cho phép các nhà thiết kế phông chữ xác định các biến thể loại trong phông chữ, cho phép một tệp phông chữ hoạt động như nhiều phông chữ. Phông chữ tiêu chuẩn được nhóm thành các gia đình phông chữ có chứa nhiều tệp phông chữ riêng biệt, mỗi tệp đại diện cho một kiểu khác nhau, ví dụ như trọng lượng nhẹ hoặc trọng lượng đậm. Phông chữ biến chứa tất cả thông tin tương tự trong một tệp phông chữ.

Sử dụng Source Sans Pro làm ví dụ, phiên bản biến của phông chữ tổng cộng khoảng 394kb và có nhiều trọng lượng nhiều loại. Nếu chúng ta sử dụng các trọng số phông chữ này dưới dạng các tệp phông chữ tiêu chuẩn, trung bình, trung bình, 234KB, kết quả trong kích thước tệp kết hợp khoảng 1856kb. Tất nhiên, tính toán này giả định rằng tất cả các trọng lượng phông chữ tồn tại riêng như một phông chữ tiêu chuẩn, mà họ không. (Mặc dù nếu bạn đang tìm kiếm phông chữ thường xuyên, hãy xem bài đăng của chúng tôi trên Phông chữ miễn phí tốt nhất có sẵn.)

Nếu chúng ta gỡ bỏ các phông chữ không tồn tại dưới dạng phông chữ tiêu chuẩn, kích thước tệp kết hợp vẫn gần gấp ba lần kích thước của phông chữ biến và với nhiều kiểu hơn đáng kể. Ngay cả khi bạn chỉ muốn các phiên bản in đậm và thường xuyên, phổ biến trong nhiều dự án web, hai phiên bản phông chữ Sans PRO tiêu chuẩn vẫn lớn hơn một phông chữ biến. Điều này chứng minh là với các phông chữ thay đổi, chúng tôi có khả năng tiết kiệm lớn trên băng thông mà không ảnh hưởng đến thiết kế và sáng tạo của chúng tôi.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — So sánh kích thước tệp của một loạt các trọng lượng phông giữa giữa phiên bản tiêu chuẩn và biến của phông chữ Sans Pro (Tín dụng hình ảnh: Mandy Michael)

Phông chữ biến hoạt động bằng cách nội suy các biến đổi chính dọc theo trục, về cơ bản đang xây dựng các điểm mới ở giữa. Điều này có nghĩa là bạn có thể đặt trọng lượng phông chữ tại các điểm tùy ý dọc theo trục trình bày một số lượng và biến thể lớn hơn nhiều. Hơn nữa, đó là do các phông chữ biến có thể được nội suy rằng chúng ta có thể hoạt hình giữa từng biến thể, cho phép các chuyển đổi mượt mà nói một trọng lượng mỏng đến trọng lượng đậm - thứ mà chúng ta chưa bao giờ có thể hoàn thành trước đó.

Điều làm cho các phông chữ thay đổi thậm chí còn thú vị hơn là các nhà thiết kế không bị giới hạn chỉ là một trục duy nhất. Phông chữ biến có thể chứa nhiều trục khác nhau đại diện cho một loạt các kiểu khác nhau. Điều này có thể bao gồm kích thước ngưng tụ, nghiêng, quang học hoặc các tùy chọn sáng tạo hoặc tùy chỉnh khác.

Bạn muốn đặt phông chữ của bạn trên một trang web mới? Đối với tài nguyên thiết kế web, hãy đến tốt nhất của chúng tôi người tạo ra trang web Roundup và chọn hàng đầu web hosting dịch vụ. Hoặc để nâng cấp lưu trữ, hãy xem những thứ này lưu trữ đám mây tùy chọn.

01. Hiểu trục trong phông chữ biến

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Nhìn vào nội suy của một phông chữ biến trên một trục và trục chiều rộng cho thấy phạm vi tùy chỉnh có sẵn (Tín dụng hình ảnh: Mandy Michael)

Sử dụng phông chữ biến trong CSS của chúng tôi rất giống với cách chúng tôi thường sử dụng phông chữ trên web: bằng cách sử dụng @ Font-Face at-cai trị . Tuy nhiên, trước tiên chúng tôi cần hiểu các loại trục khác nhau bên trong phông chữ biến vì điều này xác định thuộc tính CSS mà chúng tôi sử dụng.

Có hai loại trục trong phông chữ biến: trục đã đăng ký và trục tùy chỉnh. Một trục đã đăng ký đề cập đến một trục là đủ phổ biến để nó có giá trị tiêu chuẩn hóa. Hiện tại có năm trục đã đăng ký; Trọng lượng, chiều rộng, nghiêng, nghiêng và kích thước quang học và chúng thường được ánh xạ tới các đặc tính CSS hiện có, chẳng hạn như trọng lượng phông chữ.

Các trục tùy chỉnh được xác định bởi các nhà thiết kế kiểu chữ, có thể là bất kỳ loại biến thể nào và chỉ yêu cầu định danh bốn chữ cái trong tệp phông chữ, có thể được đề cập trong CSS.

02. Sử dụng trục đã đăng ký

A range of variable font weights along an axis from light (200) to black (900). — Biến thể trọng lượng được xác định trên một trục, từ ánh sáng (200) đến Đen (900) (Tín dụng hình ảnh: Mandy Michael)

Khi nói đến trục đã đăng ký, chúng tôi muốn đảm bảo rằng chúng tôi đang sử dụng bất kỳ thuộc tính CSS liên quan nào, ví dụ, trọng lượng phông chữ hoặc kiểu phông chữ.

Chúng ta có thể thiết lập phông chữ của chúng tôi bằng cách sử dụng @ Font-Face at-cai trị Như chúng ta thường sẽ; Sự thay đổi là cách chúng ta xác định các biến thể cho các mô tả như trọng lượng phông chữ, phông chữ kéo dài và kiểu phông chữ. Trước đây, chúng tôi sẽ đặt trọng lượng phông chữ 200 và xác định đây là phiên bản ánh sáng của phông chữ, sau đó chúng tôi thiết lập một khối mặt phông chữ khác cho phiên bản in đậm và phiên bản thông thường cho đến khi chúng tôi có tất cả các trọng lượng được yêu cầu cho thiết kế. Với phông chữ biến, chúng ta chỉ cần một khối mặt phông chữ duy nhất. Vì vậy, thay vì sử dụng nhiều phiên bản, chúng tôi chỉ định một phạm vi các giá trị tương ứng với các giá trị tối thiểu và tối đa được xác định trên trục phông chữ.

 @ Font-Face {
Font-Family: "Biến Sans nguồn";
Định dạng SRC: url ("nguồn-sans--biến.woff") ("Woff-biến đổi");
Trọng lượng phông chữ: 200 700;
}

Trong ví dụ này, chúng tôi đặt trọng lượng phông chữ 200 đến 700. Khi phạm vi của chúng tôi được xác định, chúng tôi có thể chọn bất kỳ số nào trong phạm vi đó dưới dạng trọng lượng phông chữ của chúng tôi, ví dụ 658. Quan trọng nếu bạn đặt phạm vi trọng lượng phông chữ của mình là 200 đến 700 và Sau đó thử xác định trọng lượng 900, ngay cả khi phông chữ có trọng lượng 900 được xác định trong trục của nó, bạn sẽ không thể sử dụng nó. Phạm vi xác định những gì bạn có quyền truy cập vào CSS của bạn.

03. Thiết lập trục tùy chỉnh

Vì không có thuộc tính CSS có sẵn nào tồn tại khi sử dụng trục tùy chỉnh, chúng ta cần sử dụng thuộc tính CSS mới được gọi là cài đặt biến đổi phông chữ. Điều này sẽ cho phép chúng tôi xác định càng nhiều trục được đặt tên và tùy chỉnh như chúng tôi cần.

 H1 {
Font-Family: 'Phông chữ biến của tôi';
Cài đặt phông chữ-biến đổi: 'Wght' 375, 'inli' 88;
}

Trong ví dụ ở đây, Wght đề cập đến trục trọng lượng đã đăng ký và Inli đề cập đến một trục tùy chỉnh được gọi là nội tuyến, mỗi trục có giá trị số liên quan tương ứng với một điểm dọc theo trục biến đổi. Mặc dù bạn có thể tham khảo một trục đã đăng ký như một giá trị cho cài đặt phông chữ biến đổi, bạn nên sử dụng các thuộc tính CSS được ánh xạ của chúng thay thế.

Để đảm bảo hỗ trợ trong các trình duyệt cũ hơn, chúng ta có thể sử dụng phông chữ dự phòng cho các trình duyệt không được hỗ trợ bằng cách sử dụng phát hiện tính năng CSS.

 H1 {
  Font-Family: "Nguồn Sans", Sans-serif;
  Trọng lượng phông chữ: 700;
Không thể

@supports (cài đặt biến thể phông chữ: bình thường) {
h1 {
 Font-Family: "Decovar";
 Cài đặt phông chữ-biến đổi: "inli" 88;
 Không thể
}

Bằng cách kiểm tra hỗ trợ cài đặt phông chữ-biến đổi, chúng ta có thể bao gồm các kiểu phông chữ biến của chúng tôi bên trong khối hỗ trợ CSS, đảm bảo chúng sẽ chỉ được sử dụng trong các trình duyệt có thể hỗ trợ phông chữ biến - với các phông chữ tiêu chuẩn của chúng tôi được sử dụng trong các trình duyệt không được hỗ trợ.

04. Kết hợp các phông chữ JavaScript và biến

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Phông chữ biến cho phép chuyển tiếp mượt mà từ đó, giả sử, một độ mỏng đến một trọng lượng đậm; Điều này cho phép bạn tạo các biến đổi mượt mà sử dụng các biến JavaScript (Tín dụng hình ảnh: Mandy Michael)

Chúng tôi có thể sử dụng các sự kiện JavaScript cho các tình huống nơi chúng tôi muốn điều khiển tinh chỉnh hơn hoặc thay đổi phông chữ dựa trên các sự kiện mà chúng tôi không thể truy cập bằng CSS. Một ví dụ đơn giản sẽ phù hợp với trọng lượng phông chữ của chúng tôi với kích thước của chế độ xem của chúng tôi - vì chế độ xem sẽ nhỏ hơn, trọng lượng phông chữ trở nên nặng hơn.

Để tạo tỷ lệ chất lỏng, chúng ta phải căn chỉnh hai bộ giá trị và đơn vị - trọng lượng phông chữ và kích thước khung nhìn. Chúng ta có thể truy cập chiều rộng ViewPort hiện tại bằng Window.innerWidth và tạo thang đo dựa trên phần trăm mới bằng cách chuyển đổi nó thành một phạm vi 0-0,99. Bằng cách bao gồm các kích thước khung nhìn tối thiểu và tối đa, chúng ta có thể kiểm soát phạm vi hiệu ứng.

 var viewportscale =
(window.innerwidth - minwindowsize) / (maxwindowsize - minwindowsize);

Sau đó chúng tôi xác định trọng lượng phông chữ dựa trên kích thước khung nhìn của chúng tôi.

 var font weightscale = viewportscale * (minfont weight - maxfont weight) + maxfont weight;

Sử dụng các thuộc tính tùy chỉnh CSS, chúng ta có thể sử dụng giá trị JavaScript của chúng tôi để cập nhật trọng lượng phông chữ trong CSS của chúng tôi.

 P.Style.setProperty ("- Trọng lượng", Font weightscale);

Khi điều này được kết hợp thành một hàm và được đính kèm với người nghe sự kiện thay đổi kích thước, chúng ta có thể cập nhật trọng lượng phông chữ dựa trên kích thước mới của cửa sổ.

Với cách tiếp cận cơ bản này, chúng tôi có thể sửa đổi kiểu chữ của chúng tôi dựa trên tất cả các sự kiện và kinh nghiệm. Nơi xem rộng rộng, chúng ta có thể có nhiều chi tiết hơn; Ngược lại, khi nó nhỏ hơn và trong một không gian hạn chế hơn, chúng ta có thể xem xét việc giảm chiều rộng phông chữ hoặc tăng trọng lượng, cung cấp khả năng kiểm soát nội dung và kiểu chữ của chúng tôi về khả năng đọc, khả năng sử dụng và thiết kế.

Bạn có thể Xem mã Đối với điều này trên Codepen.

Bài viết này ban đầu được xuất bản trong số 318 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Theo dõi mạng tại đây .

Khám phá thêm về phông chữ biến tại việc tạo CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Tín dụng hình ảnh: Getty / Bianca Berning / Tương lai)

Trong cuộc nói chuyện của cô ấy tại Generate CSS, hội nghị CSS tập trung cho các nhà thiết kế web diễn ra vào ngày 26 tháng 9 năm 2019 tại Rich Mix, London, Bianca Berning sẽ khám phá cách các phông chữ biến có thể tạo ra các cơ hội mới cho từ viết truyền thống cũng như mới, nhập vai kinh nghiệm, chẳng hạn như AR, VR và thực tế hỗn hợp.

Nếu bạn muốn bắt được điều này và những cuộc nói chuyện tuyệt vời khác, nó đáng để chụp vé của bạn bây giờ. Nếu bạn lấy của bạn trước 5 giờ chiều UTC vào ngày 15 tháng 8, bạn có thể tiết kiệm £ 50, chỉ trả giá 200 bảng + VAT. Mua vé của bạn ngay bây giờ !

Những bài viết liên quan:

3 cách công nghệ là thay đổi loại
Bắt đầu với phông chữ biến trong CSS
Chuyển đổi loại của bạn trực tuyến với phông chữ biến

4 bước để sử dụng phông chữ biến

01. Hiểu trục trong phông chữ biến

02. Sử dụng trục đã đăng ký

03. Thiết lập trục tùy chỉnh

04. Kết hợp các phông chữ JavaScript và biến

Khám phá thêm về phông chữ biến tại việc tạo CSS

Cách - Các bài báo phổ biến nhất

Cách sử dụng Sketch Gravity

Ba bước để một bầu trời đêm lấp lánh trong màu nước

Vẽ một cảnh truyện cổ tích cổ điển với Procreate

Vẽ một cảnh biển tràn đầy năng lượng trong dầu

Cách vẽ cảnh làng truyền thống Anh

Làm thế nào để điêu khắc mắt thuyết phục trong Zbrush

Phát triển các kỹ năng biếm họa của bạn

Cách tạo tóc và lông 3D

Thể loại