Một quy cách phông chữ mới có thể giảm đáng kể kích thước tệp phông chữ
Trong bài viết này, bạn sẽ khám phá phông chữ biến đổi, những lợi ích mà phông chữ này mang lại và cách sử dụng chúng trong công việc của bạn. Trước tiên, hãy xem lại cách hoạt động của kiểu chữ trên web và những điểm mới lạ mà phông chữ có thể thay đổi mang lại.
Khả năng tương thích với trình duyệt
Kể từ tháng 5 năm 2020, hầu hết các trình duyệt đều hỗ trợ phông chữ có thể thay đổi. Xem phần Tôi có thể sử dụng phông chữ có thể thay đổi không? và Phông chữ dự phòng.
Giới thiệu
Các nhà phát triển thường dùng lẫn lộn thuật ngữ phông chữ và kiểu chữ. Tuy nhiên, có một điểm khác biệt: Kiểu chữ là thiết kế hình ảnh cơ bản có thể tồn tại trong nhiều công nghệ sắp chữ khác nhau, còn phông chữ là một trong những cách triển khai này, ở định dạng tệp kỹ thuật số. Nói cách khác, kiểu chữ là thứ bạn nhìn thấy, còn phông chữ là thứ bạn sử dụng.
Một khái niệm khác thường bị bỏ qua là sự khác biệt giữa kiểu chữ và họ chữ. Kiểu là một kiểu chữ đơn lẻ và cụ thể, chẳng hạn như In đậm và nghiêng, còn họ là toàn bộ tập hợp các kiểu.
Trước khi có phông chữ biến đổi, mỗi kiểu chữ được triển khai dưới dạng một tệp phông chữ riêng biệt. Với phông chữ có thể thay đổi, tất cả kiểu chữ đều có thể nằm trong một tệp duy nhất.
Thách thức đối với nhà thiết kế và nhà phát triển
Khi tạo một dự án in, nhà thiết kế sẽ phải đối mặt với một số hạn chế, chẳng hạn như kích thước thực của bố cục trang, số lượng màu mà họ có thể sử dụng (được xác định bởi loại máy in sẽ được sử dụng), v.v. Nhưng họ có thể sử dụng bao nhiêu kiểu chữ tuỳ thích. Điều này có nghĩa là kiểu chữ của phương tiện in thường phong phú và tinh tế, để trải nghiệm đọc thực sự thú vị. Hãy nghĩ về lần gần đây nhất bạn thích thú khi duyệt xem một tạp chí hay.
Nhà thiết kế và nhà phát triển web có những hạn chế khác với nhà thiết kế bản in, một trong số đó là chi phí băng thông liên quan đến các thiết kế của chúng tôi. Đây là một điểm khó khăn đối với trải nghiệm kiểu chữ phong phú hơn, vì chúng có chi phí. Với phông chữ web truyền thống, mỗi kiểu được sử dụng trong thiết kế của chúng tôi đều yêu cầu người dùng tải một tệp phông chữ riêng biệt, điều này làm tăng độ trễ và thời gian hiển thị trang. Chỉ bao gồm các kiểu Chữ thường và Chữ đậm, cộng với các kiểu chữ nghiêng tương ứng, có thể chiếm đến 500 KB hoặc hơn dữ liệu phông chữ. Đây là trước khi chúng ta xử lý cách phông chữ được hiển thị, các mẫu dự phòng mà chúng ta cần sử dụng hoặc các tác dụng phụ không mong muốn như FOIT và FOUT.
Nhiều bộ phông chữ cung cấp nhiều kiểu dáng hơn, từ độ đậm Thin đến Black, chiều rộng hẹp và rộng, nhiều chi tiết về kiểu dáng và thậm chí cả thiết kế dành riêng cho kích thước (được tối ưu hoá cho cỡ chữ lớn hoặc nhỏ). Vì bạn sẽ phải tải một tệp phông chữ mới cho mỗi kiểu (hoặc tổ hợp kiểu), nên nhiều nhà phát triển web chọn không sử dụng các chức năng này, làm giảm trải nghiệm đọc của người dùng.
Cấu trúc của phông chữ biến đổi
Phông chữ có thể thay đổi giúp giải quyết những thách thức này bằng cách đóng gói các kiểu vào một tệp duy nhất.
Cách này hoạt động bằng cách bắt đầu với một kiểu chữ trung tâm hoặc "mặc định", thường là kiểu chữ "Regular" (Thông thường) – một kiểu chữ La Mã thẳng đứng với trọng lượng và chiều rộng điển hình nhất, phù hợp nhất với văn bản thuần tuý. Sau đó, kiểu chữ này được kết nối với các kiểu chữ khác trong một dải liên tục, được gọi là "trục". Trục phổ biến nhất là Độ đậm, có thể kết nối kiểu mặc định với kiểu In đậm. Mọi kiểu chữ riêng lẻ đều có thể nằm dọc theo một trục và được gọi là "thể hiện" của phông chữ biến đổi. Một số trường hợp được nhà phát triển phông chữ đặt tên, ví dụ: vị trí 600 của trục Độ đậm được gọi là Bán đậm.
Phông chữ có thể thay đổi Roboto Flex có 3 kiểu cho trục Độ đậm. Kiểu Chữ thường nằm ở giữa, và có hai kiểu ở hai đầu đối diện của trục, một kiểu nhẹ hơn và một kiểu nặng hơn. Trong số này, bạn có thể chọn trong số 900 phiên bản:
Nhà phát triển phông chữ có thể cung cấp một bộ gồm nhiều trục. Bạn có thể kết hợp các thành phần này vì chúng đều có cùng kiểu mặc định. Roboto có 3 kiểu trong trục Chiều rộng: kiểu Thông thường nằm ở giữa trục và 2 kiểu hẹp hơn và rộng hơn nằm ở mỗi đầu. Các trục này cung cấp tất cả các chiều rộng của kiểu Regular và kết hợp với trục Weight để cung cấp tất cả các chiều rộng cho mọi độ đậm.
Điều này có nghĩa là có hàng nghìn kiểu chữ! Điều này có vẻ hơi thừa, nhưng chất lượng của trải nghiệm đọc có thể được nâng cao đáng kể nhờ sự đa dạng của các kiểu chữ này. Và nếu không bị ảnh hưởng đến hiệu suất, nhà phát triển web có thể sử dụng một vài hoặc nhiều kiểu tuỳ ý – điều này phụ thuộc vào thiết kế của họ.
In nghiêng
Cách xử lý chữ in nghiêng trong phông chữ có thể thay đổi rất thú vị, vì có 2 cách tiếp cận khác nhau. Các kiểu chữ như Helvetica hoặc Roboto có đường viền tương thích với nội suy, vì vậy, các kiểu chữ La Mã và chữ nghiêng có thể được nội suy giữa các kiểu chữ này và bạn có thể dùng trục Độ nghiêng để chuyển từ kiểu chữ La Mã sang chữ nghiêng.
Các kiểu chữ khác (chẳng hạn như Garamond, Baskerville hoặc Bodoni) có đường viền chữ cái La Mã và chữ nghiêng không tương thích với nội suy. Ví dụ: đường viền thường xác định chữ "n" viết thường trong kiểu chữ La Mã không khớp với đường viền dùng để xác định chữ "n" viết thường trong kiểu chữ nghiêng. Thay vì nội suy một đường viền sang đường viền khác, trục Italic sẽ chuyển đổi từ đường viền Roman sang đường viền Italic.
Sau khi chuyển sang kiểu chữ in nghiêng, các trục mà người dùng có thể sử dụng phải giống với các trục của kiểu chữ La Mã, cũng như bộ ký tự phải giống nhau.
Bạn cũng có thể thấy khả năng thay thế glyph cho từng glyph và sử dụng ở bất kỳ đâu trong không gian thiết kế của một phông chữ biến đổi. Ví dụ: thiết kế dấu đô la có hai thanh dọc hoạt động hiệu quả nhất ở cỡ chữ lớn hơn, nhưng ở cỡ chữ nhỏ hơn, thiết kế chỉ có một thanh sẽ phù hợp hơn. Khi chúng ta có ít pixel hơn để kết xuất glyph, thiết kế hai thanh có thể trở nên khó đọc. Để khắc phục vấn đề này, tương tự như trục Chữ nghiêng, việc thay thế một glyph bằng một glyph khác có thể xảy ra dọc theo trục Kích thước hiển thị tại một điểm do nhà thiết kế kiểu chữ quyết định.
Tóm lại, khi các đường viền cho phép, nhà thiết kế kiểu chữ có thể tạo ra những phông chữ nội suy giữa nhiều kiểu trong không gian thiết kế đa chiều. Điều này giúp bạn kiểm soát chi tiết kiểu chữ và có nhiều quyền hơn.
Định nghĩa về trục
Có 5 trục đã đăng ký, kiểm soát các tính năng đã biết, có thể dự đoán của phông chữ: độ đậm, chiều rộng, kích thước quang học, độ nghiêng và chữ nghiêng. Ngoài ra, một phông chữ có thể chứa các trục tuỳ chỉnh. Những yếu tố này có thể kiểm soát mọi khía cạnh thiết kế của phông chữ mà nhà thiết kế kiểu chữ mong muốn: kích thước của chân chữ, độ dài của nét hất, chiều cao của phần nhô lên hoặc kích thước của dấu chấm trên chữ i.
Mặc dù các trục có thể kiểm soát cùng một tính năng, nhưng chúng có thể sử dụng các giá trị khác nhau. Ví dụ: trong phông chữ biến thể Oswald và Hepta Slab, chỉ có một trục duy nhất là Trọng lượng, nhưng các dải trọng lượng lại khác nhau – Oswald có cùng dải trọng lượng như trước khi được nâng cấp thành biến thể, từ 200 đến 700, nhưng Hepta Slab có trọng lượng cực kỳ mảnh ở mức 1 và tăng lên đến 900.
Năm trục đã đăng ký có các thẻ gồm 4 ký tự viết thường được dùng để đặt giá trị của chúng trong CSS:
| Tên trục và giá trị CSS | |
|---|---|
| Trọng lượng |
wght
|
| Chiều rộng |
wdth
|
| Liếc mắt |
slnt
|
| Kích thước quang học |
opsz
|
| In nghiêng |
ital
|
Vì nhà phát triển phông chữ xác định những trục có trong một phông chữ có thể thay đổi và những giá trị mà các trục đó có thể có, nên bạn cần tìm hiểu xem mỗi phông chữ cung cấp những gì. Tài liệu của phông chữ phải cung cấp thông tin này hoặc bạn có thể kiểm tra phông chữ bằng một công cụ như Wakamai Fondue.
Trường hợp sử dụng và lợi ích
Việc đặt giá trị trục phụ thuộc vào sở thích cá nhân và việc áp dụng các phương pháp hay nhất về kiểu chữ. Mọi công nghệ mới đều có thể bị sử dụng sai mục đích, đồng thời những chế độ cài đặt quá nghệ thuật hoặc mang tính khám phá cũng có thể làm giảm khả năng đọc của văn bản thực tế. Đối với tiêu đề, việc khám phá các trục khác nhau để tạo ra những thiết kế nghệ thuật tuyệt vời là điều thú vị, nhưng đối với nội dung văn bản, điều này có nguy cơ khiến văn bản trở nên khó đọc.
Biểu thức phấn khích
Đây là một ví dụ tiêu biểu về cách thể hiện nghệ thuật, khám phá kiểu chữ Decovar của Mandy Michael.
Hoạt ảnh
Bạn cũng có thể khám phá cách tạo hiệu ứng cho các ký tự bằng phông chữ có thể thay đổi. Video trên là một ví dụ về việc sử dụng nhiều trục với kiểu chữ Zycon. Xem ví dụ về ảnh động trực tiếp trên Axis Praxis.
Anicons là phông chữ biểu tượng màu có ảnh động đầu tiên trên thế giới, dựa trên Biểu tượng Material Design. Anicons là một thử nghiệm kết hợp hai công nghệ phông chữ tiên tiến: phông chữ có thể thay đổi và phông chữ màu.
Finesse
Roboto Flex và Amstelvar cung cấp một nhóm "Trục tham số". Trong các trục này, các chữ cái được phân tích thành 4 khía cạnh cơ bản của hình dạng: hình dạng màu đen hoặc dương, hình dạng màu trắng hoặc âm và kích thước x và y. Tương tự như cách bạn có thể pha trộn màu chính với bất kỳ màu nào khác để điều chỉnh màu đó, bạn có thể sử dụng 4 khía cạnh này để tinh chỉnh bất kỳ trục nào khác.
Trục XTRA trong Amstelvar cho phép bạn điều chỉnh giá trị "trắng" trên mỗi nghìn, như minh hoạ trong ví dụ trước. Bằng cách sử dụng một chút XTRA theo hướng ngược lại, độ rộng của các từ sẽ được cân bằng.
Phông chữ biến đổi trong CSS
Đang tải tệp phông chữ biến đổi
Phông chữ biến đổi được tải thông qua cùng một cơ chế @font-face như phông chữ tĩnh truyền thống trên web, nhưng có 2 điểm cải tiến mới:
@font-face {
font-family: 'Roboto Flex';
src: url('RobotoFlex-VF.woff2') format('woff2-variations');
src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
1. Định dạng nguồn: Chúng tôi không muốn trình duyệt tải phông chữ xuống nếu trình duyệt đó không hỗ trợ phông chữ có thể thay đổi, vì vậy, chúng tôi thêm nội dung mô tả format và tech: một lần trong cú pháp trong tương lai (format('woff2') tech('variations')), một lần trong cú pháp đã không còn được dùng nhưng vẫn được các trình duyệt hỗ trợ (format('woff2-variations')). Nếu trình duyệt hỗ trợ phông chữ có thể thay đổi và hỗ trợ cú pháp sắp tới, thì trình duyệt sẽ sử dụng khai báo đầu tiên. Nếu hỗ trợ phông chữ có thể thay đổi và cú pháp hiện tại, thì trình duyệt sẽ dùng khai báo thứ hai. Cả hai đều trỏ đến cùng một tệp phông chữ.
2. Phạm vi kiểu: Bạn sẽ nhận thấy chúng tôi đang cung cấp hai giá trị cho font-weight và font-stretch. Thay vì cho trình duyệt biết độ đậm cụ thể mà phông chữ này cung cấp (ví dụ: font-weight: 500;), giờ đây, chúng ta sẽ cung cấp cho trình duyệt dải độ đậm mà phông chữ hỗ trợ. Đối với Roboto Flex, trục Trọng lượng có phạm vi từ 100 đến 1000 và CSS sẽ trực tiếp liên kết phạm vi trục với thuộc tính kiểu font-weight. Bằng cách chỉ định phạm vi trong @font-face, mọi giá trị nằm ngoài phạm vi này sẽ được "giới hạn" ở giá trị hợp lệ gần nhất. Phạm vi trục Chiều rộng được ánh xạ theo cách tương tự với thuộc tính font-stretch.
Nếu bạn đang sử dụng Google Fonts API, thì mọi việc sẽ được xử lý. Không chỉ chứa các định dạng và dải nguồn phù hợp, CSS còn gửi các phông chữ dự phòng tĩnh trong trường hợp phông chữ có thể thay đổi không được hỗ trợ.
Sử dụng trọng số và chiều rộng
Hiện tại, các trục mà bạn có thể thiết lập một cách đáng tin cậy từ CSS là trục wght thông qua font-weight và trục wdth thông qua font-stretch.
Theo truyền thống, bạn sẽ đặt font-weight làm từ khoá (light, bold) hoặc làm giá trị bằng số từ 100 đến 900, theo các bước 100. Với phông chữ có thể thay đổi, bạn có thể đặt bất kỳ giá trị nào trong phạm vi Chiều rộng của phông chữ:
.kinda-light {
font-weight: 125;
}
.super-heavy {
font-weight: 1000;
}
Tương tự, chúng ta có thể đặt font-stretch bằng từ khoá (condensed, ultra-expanded) hoặc bằng giá trị phần trăm:
.kinda-narrow {
font-stretch: 33.3%;
}
.super-wide {
font-stretch: 151%;
}
Sử dụng chữ in nghiêng và chữ nghiêng
Trục ital dành cho những phông chữ có cả kiểu chữ thường và kiểu chữ nghiêng. Trục này là một công tắc bật/tắt: giá trị 0 là tắt và sẽ hiển thị kiểu chữ thông thường, giá trị 1 sẽ hiển thị kiểu chữ in nghiêng. Không giống như các trục khác, không có hiệu ứng chuyển đổi. Giá trị 0.5 sẽ không cho bạn "chữ nghiêng một nửa".
Trục slnt khác với chữ nghiêng ở chỗ đây không phải là một kiểu mới mà chỉ nghiêng kiểu thông thường. Theo mặc định, giá trị của thuộc tính này là 0, tức là hình dạng chữ thẳng đứng mặc định. Roboto Flex có độ nghiêng tối đa là -10 độ, tức là các chữ cái sẽ nghiêng về bên phải khi đi từ 0 đến -10.
Bạn có thể đặt các trục này thông qua thuộc tính font-style, nhưng kể từ tháng 4 năm 2020, cách thực hiện chính xác việc này vẫn đang được nghiên cứu. Vì vậy, hiện tại, bạn nên coi đây là các trục tuỳ chỉnh và đặt chúng thông qua font-variation-settings:
i, em, .italic {
/* Should be font-style: italic; */
font-variation-settings: 'ital' 1;
}
.slanted {
/* Should be font-style: oblique 10deg; */
font-variation-settings: 'slnt' 10;
}
Sử dụng kích thước quang học
Một kiểu chữ có thể được hiển thị rất nhỏ (chú thích 12px) hoặc rất lớn (dòng tiêu đề 80px). Phông chữ có thể phản hồi những thay đổi về kích thước này bằng cách thay đổi hình dạng chữ để phù hợp hơn với kích thước của phông chữ. Một kích thước nhỏ có thể sẽ phù hợp hơn nếu không có các chi tiết nhỏ, trong khi một kích thước lớn có thể sẽ phù hợp hơn nếu có nhiều chi tiết và nét vẽ mỏng hơn.
Một thuộc tính CSS mới đã được giới thiệu cho trục này: font-optical-sizing. Theo mặc định, giá trị này được đặt thành auto, khiến trình duyệt đặt giá trị trục dựa trên font-size. Điều này có nghĩa là trình duyệt sẽ tự động chọn kích thước tối ưu nhất, nhưng nếu muốn tắt tính năng này, bạn có thể đặt font-optical-sizing thành none.
Bạn cũng có thể đặt một giá trị tuỳ chỉnh cho trục opsz nếu cố ý muốn kích thước hiển thị không khớp với cỡ chữ. CSS sau đây sẽ khiến văn bản hiển thị ở kích thước lớn, nhưng ở kích thước quang học như thể văn bản đó được in trong 8pt:
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
Sử dụng trục tuỳ chỉnh
Không giống như các trục đã đăng ký, các trục tuỳ chỉnh sẽ không được liên kết với một thuộc tính CSS hiện có, vì vậy, bạn sẽ luôn phải đặt các trục này thông qua font-variation-settings.
Thẻ cho các trục tuỳ chỉnh luôn ở dạng chữ hoa để phân biệt với các trục đã đăng ký.
Roboto Flex cung cấp một số trục tuỳ chỉnh và quan trọng nhất là Trục cấp độ (GRAD). Trục cấp độ rất thú vị vì nó thay đổi độ đậm của phông chữ mà không thay đổi chiều rộng, do đó, dấu ngắt dòng không thay đổi. Bằng cách điều chỉnh Trục cấp độ, bạn có thể tránh phải điều chỉnh Trục trọng lượng ảnh hưởng đến chiều rộng tổng thể, sau đó điều chỉnh Trục chiều rộng ảnh hưởng đến trọng lượng tổng thể.
Vì GRAD là một trục tuỳ chỉnh, có phạm vi từ -200 đến 150 trong Roboto Flex.
Chúng tôi cần giải quyết vấn đề này với font-variation-settings:
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Phông chữ biến đổi trên Google Fonts
Google Fonts đã mở rộng danh mục của mình bằng phông chữ có thể thay đổi và thường xuyên bổ sung các phông chữ mới.
Giao diện này hiện nhằm mục đích chọn các phiên bản riêng lẻ từ phông chữ: bạn chọn biến thể mình muốn, nhấp vào "Chọn kiểu này" và biến thể đó sẽ được thêm vào phần tử <link> tìm nạp CSS và phông chữ từ Google Fonts.
Để sử dụng tất cả các trục hoặc dải giá trị có sẵn, bạn sẽ phải tự tạo URL cho Google Fonts API. Tổng quan về phông chữ có thể thay đổi liệt kê tất cả các trục và giá trị.
Công cụ Google Variable Fonts Links (Đường liên kết đến phông chữ biến đổi của Google) cũng có thể cung cấp cho bạn các URL mới nhất cho toàn bộ phông chữ biến đổi.
Tính kế thừa font-variation-settings
Mặc dù tất cả các trục đã đăng ký sẽ sớm được hỗ trợ thông qua các thuộc tính CSS hiện có, nhưng tạm thời, bạn có thể cần dựa vào font-variation-settings làm phương án dự phòng. Và nếu phông chữ của bạn có các trục tuỳ chỉnh, bạn cũng cần font-variation-settings.
Tuy nhiên, có một điểm cần lưu ý về font-variation-settings. Mọi thuộc tính mà bạn không đặt một cách rõ ràng sẽ tự động được đặt lại về giá trị mặc định.
Các giá trị đã đặt trước đó sẽ không được kế thừa! Điều này có nghĩa là những tính năng sau sẽ không hoạt động như mong đợi:
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>
Trước tiên, trình duyệt sẽ áp dụng font-variation-settings: 'slnt' 10 từ lớp .slanted. Sau đó, nó sẽ áp dụng font-variation-settings: 'GRAD' -200 từ lớp .grade-light. Tuy nhiên, thao tác này sẽ đặt lại slnt về giá trị mặc định là 0! Kết quả sẽ là văn bản có màu sáng nhưng không bị nghiêng.
May mắn thay, chúng ta có thể giải quyết vấn đề này bằng cách sử dụng các biến CSS:
/* Set the default values */
:root {
--slnt: 0;
--GRAD: 0;
}
/* Change value for these elements and their children */
.slanted {
--slnt: 10;
}
.grade-light {
--grad: -200;
}
.grade-normal {
--grad: 0;
}
.grade-heavy {
--grad: 150;
}
/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}
Các biến CSS sẽ xếp tầng, vì vậy nếu một phần tử (hoặc một trong các phần tử mẹ của phần tử đó) đã đặt slnt thành 10, thì phần tử đó sẽ giữ nguyên giá trị đó, ngay cả khi bạn đặt GRAD thành một giá trị khác. Hãy xem phần Khắc phục vấn đề kế thừa phông chữ có thể thay đổi để biết giải thích chi tiết về kỹ thuật này.
Xin lưu ý rằng việc tạo ảnh động cho các biến CSS không hoạt động (theo thiết kế), vì vậy, một số nội dung như sau sẽ không hoạt động:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
Các ảnh động này sẽ phải diễn ra ngay trên font-variation-settings.
Tăng hiệu suất
Phông chữ biến đổi OpenType cho phép chúng ta lưu trữ nhiều biến thể của một họ phông chữ vào một tệp phông chữ duy nhất. Monotype đã tiến hành một thử nghiệm bằng cách kết hợp 12 phông chữ đầu vào để tạo ra 8 độ đậm, trên 3 chiều rộng, cho cả kiểu chữ nghiêng và kiểu chữ La Mã. Việc lưu trữ 48 phông chữ riêng lẻ trong một tệp phông chữ có thể thay đổi giúp giảm 88% kích thước tệp.
Tuy nhiên, nếu chỉ sử dụng một phông chữ như Roboto Regular và không có gì khác, thì bạn có thể không thấy kích thước phông chữ tăng lên nếu chuyển sang phông chữ có thể thay đổi với nhiều trục. Như thường lệ, điều này tuỳ thuộc vào trường hợp sử dụng của bạn.
Mặt khác, việc tạo hiệu ứng chuyển động cho phông chữ giữa các chế độ cài đặt có thể gây ra các vấn đề về hiệu suất. Mặc dù vấn đề này sẽ được cải thiện khi tính năng hỗ trợ phông chữ có thể thay đổi trong trình duyệt trở nên hoàn thiện hơn, nhưng bạn có thể giảm bớt vấn đề này bằng cách chỉ tạo hiệu ứng cho những phông chữ hiện có trên màn hình. Đoạn mã hữu ích này của Dinamo sẽ tạm dừng ảnh động trong các phần tử có lớp vf-animation khi các phần tử đó không xuất hiện trên màn hình:
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
// Pause/Play the animation
if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
else entry.target.style.animationPlayState = "paused"
});
});
var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });
Nếu phông chữ của bạn phản hồi hoạt động tương tác của người dùng, bạn nên hạn chế hoặc loại bỏ các sự kiện đầu vào trùng lặp. Điều này sẽ ngăn trình duyệt hiển thị các phiên bản của phông chữ biến đổi thay đổi quá ít so với phiên bản trước đó mà mắt thường không nhận thấy sự khác biệt.
Nếu đang sử dụng Google Fonts, bạn nên kết nối trước đến https://fonts.gstatic.com, miền nơi các phông chữ của Google được lưu trữ. Điều này sẽ đảm bảo trình duyệt biết trước nơi lấy phông chữ khi gặp phải phông chữ đó trong CSS:
<link rel="preconnect" href="https://fonts.gstatic.com" />
Mẹo này cũng áp dụng cho các CDN khác: trình duyệt thiết lập kết nối mạng càng sớm thì càng có thể tải phông chữ của bạn xuống sớm.
Tìm thêm các mẹo nâng cao hiệu suất để tải Google Fonts trong bài viết Google Fonts nhanh nhất.
Giải pháp dự phòng và khả năng hỗ trợ trình duyệt
Tất cả trình duyệt hiện đại đều hỗ trợ phông chữ có thể thay đổi. Trong trường hợp cần hỗ trợ các trình duyệt cũ, bạn có thể chọn tạo trang web bằng phông chữ tĩnh và sử dụng phông chữ có thể thay đổi làm tính năng nâng cao tăng dần:
/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
@font-face {
font-family: Roboto;
src: url('Roboto-Regular.woff2');
font-weight: normal;
}
@font-face {
font-family: Roboto;
src: url('Roboto-Bold.woff2');
font-weight: bold;
}
body {
font-family: Roboto;
}
.super-bold {
font-weight: bold;
}
}
/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Roboto';
src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
url('RobotoFlex-VF.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
.super-bold {
font-weight: 1000;
}
}
Đối với các trình duyệt cũ, văn bản có lớp .super-bold sẽ được hiển thị ở dạng in đậm thông thường, vì đó là phông chữ in đậm duy nhất mà chúng tôi có. Khi phông chữ có thể thay đổi được hỗ trợ, chúng ta có thể sử dụng trọng lượng nặng nhất là 1000.
Internet Explorer không hỗ trợ quy tắc @supports, vì vậy trình duyệt này sẽ không hiển thị kiểu nào. Nếu đây là vấn đề, bạn luôn có thể sử dụng một trong những thủ thuật cũ để nhắm đến các trình duyệt cũ có liên quan.
Nếu bạn đang sử dụng Google Fonts API, thì API này sẽ lo việc tải các phông chữ phù hợp cho trình duyệt của khách truy cập. Giả sử bạn yêu cầu phông chữ Oswald trong dải trọng lượng từ 200 đến 700, như sau:
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
Các trình duyệt hiện đại có thể xử lý phông chữ có thể thay đổi sẽ nhận được phông chữ có thể thay đổi và sẽ có mọi độ đậm từ 200 đến 700. Các trình duyệt cũ sẽ được phân phát từng phông chữ tĩnh riêng lẻ cho mỗi độ đậm. Trong trường hợp này, điều đó có nghĩa là họ sẽ tải 6 tệp phông chữ xuống: một tệp cho trọng số 200, một tệp cho trọng số 300, v.v.
Cảm ơn bạn!
Bài viết này chỉ có thể được thực hiện nhờ sự trợ giúp của những người sau:
- Mustafa Kurtuldu, nhà thiết kế trải nghiệm người dùng và người ủng hộ thiết kế tại Google
- Roel Nieskens, nhà thiết kế/nhà phát triển trải nghiệm người dùng và chuyên gia về kiểu chữ tại Kabisa
- Dave Crossland, Quản lý chương trình, Google Fonts
- David Berlow, nhà thiết kế kiểu chữ và người sắp xếp chữ tại Font Bureau
- Laurence Penney, nhà phát triển của axis-praxis.org
- Mandy Michael, nhà phát triển của variablefonts.dev