Thông số kỹ thuật mới về phông chữ có thể giảm đáng kể kích thước tệp phông chữ
Trong bài viết này, chúng ta sẽ tìm hiểu về các phông chữ có thể thay đổi, những lợi ích mà phông chữ đó mang lại và cách chúng ta có thể sử dụng những phông chữ đó trong công việc của mình. Trước tiên, hãy cùng xem xét cách thức hoạt động của kiểu chữ trên web và những điểm cải tiến mà phông chữ biến đổ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 trình duyệt đều hỗ trợ phông chữ có thể thay đổi. Hãy xem phần Tôi có thể sử dụng phông chữ thay đổi không? và Bản dự phòng.
Giới thiệu
Phông chữ và kiểu chữ thường được các nhà phát triển sử dụng thay thế cho nhau. 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ữ, và 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à nội dung bạn nhìn thấy và phông chữ là nội dung 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 phong cách và gia đình. Kiểu là một kiểu chữ đơn lẻ và cụ thể, chẳng hạn như In nghiêng Đậm và một kiểu chữ là một tập hợp kiểu hoàn chỉnh.
Trước khi có phông chữ thay đổi, mỗi kiểu được triển khai dưới dạng một tệp phông chữ riêng. Với phông chữ có thể thay đổi, tất cả các kiểu đề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ế phải đối mặt với một số hạn chế, chẳng hạn như kích thước vật lý của bố cục trang, số lượng màu sắc họ có thể sử dụng (được xác định theo loại phương thức in ấn sẽ sử dụng), v.v. Tuy nhiên, họ có thể dùng bao nhiêu kiểu chữ tuỳ thích. Điều này có nghĩa là kiểu chữ của nội dung đa phương tiện in thường phong phú và tinh tế, mang lại trải nghiệm đọc thực sự thú vị. Hãy nghĩ về lần cuối bạn thưởng thức một tạp chí tuyệt vời.
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ế in và một điều quan trọng là chi phí băng thông liên quan trong các thiết kế của chúng tôi. Đây là điểm gắn liền với trải nghiệm kiểu chữ phong phú hơn vì chúng đi kèm chi phí. Với phông chữ web truyền thống, mỗi kiểu dùng trong thiết kế của chúng tôi yêu cầu người dùng tải một tệp phông chữ riêng. Việc này làm tăng độ trễ và thời gian hiển thị trang. Chỉ bao gồm kiểu Thông thường và Kiểu Đậm, cùng với các kiểu in nghiêng, có thể có tới 500 KB dữ liệu phông chữ trở lên. Điều này thậm chí là trước khi chúng tôi xử lý cách hiển thị phông chữ, mẫu dự phòng chúng tôi cần sử dụng hoặc các hiệu ứng phụ không mong muốn như FOIT và FOUT.
Nhiều bộ phông chữ có nhiều kiểu chữ hơn, từ trọng số Mỏng đến Đen, chiều rộng hẹp và rộng, nhiều chi tiết kiểu cách và thậm chí là các thiết kế theo kích thước cụ thể (được tối ưu hoá cho kích thước văn bản lớn hoặc nhỏ.) Vì bạn phải tải một tệp phông chữ mới cho mỗi kiểu (hoặc tổ hợp các kiểu), nên nhiều nhà phát triển web chọn không sử dụng các tính 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ữ có thể thay đổi
Nhiều phông chữ có thể giải quyết những thách thức này bằng cách tập hợp các kiểu vào một tệp duy nhất.
Để thực hiện điều này, hãy bắt đầu bằng kiểu ở giữa hoặc "mặc định", thường là kiểu "Thông thường" – một thiết kế kiểu La Mã thẳng đứng có độ đậm và chiều rộng tiêu biểu nhất phù hợp nhất với văn bản thuần tuý. Sau đó, chuỗi này được kết nối với các kiểu khác trong một phạm vi liên tục, được gọi là "trụ". Trục phổ biến nhất là Weight (Cân nặng), có thể kết nối kiểu mặc định với kiểu In đậm. Bất kỳ kiểu riêng lẻ nào cũng có thể nằm dọc theo một trục và được gọi là "thực thể" của phông chữ biến. Một số thực thể được nhà phát triển phông chữ đặt tên, ví dụ: vị trí trục Trọng lượng 600 được gọi là SemiBold.
Phông chữ thay đổi Roboto Flex có 3 kiểu cho trục Weight (Cân nặng). Kiểu Thông thường nằm ở chính giữa và có hai kiểu ở hai đầu đối diện của trục: một kiểu sáng hơn và kiểu còn lại 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 tập hợp các trục khác nhau. Bạn có thể kết hợp chúng vì tất cả đều có cùng một kiểu mặc định. Roboto có 3 kiểu trong trục Chiều rộng: thẻ Regular nằm ở giữa trục còn 2 kiểu hẹp hơn và rộng hơn nằm ở mỗi đầu. Các đối tượng này cung cấp tất 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ả chiều rộng cho mọi trọng số.
Như vậy có nghĩa là có hàng nghìn kiểu! Việc này nghe có vẻ quá tốn kém, nhưng chất lượng trải nghiệm đọc có thể được cải thiện đáng kể nhờ sự đa dạng của các kiểu chữ. Ngoài ra, nếu không có hình phạt về hiệu suất, các nhà phát triển web có thể sử dụng vài hoặc nhiều kiểu tuỳ thích – tuỳ thuộc vào thiết kế của họ.
In nghiêng
Cách xử lý chữ In nghiêng trong các phông chữ thay đổi rất thú vị, vì có hai cách tiếp cận khác nhau. Các kiểu chữ như Roboto hoặc Roboto có các đường viền tương thích với nội suy, vì vậy kiểu chữ La Mã và In nghiêng của chúng có thể được nội suy giữa và trục Slant có thể được sử dụng để chuyển từ chữ La Mã sang chữ In nghiêng.
Các kiểu chữ khác (chẳng hạn như Garamond, Baskerville hoặc Bodoni) có đường viền glyph kiểu La Mã và In nghiêng không tương thích với tính năng nội suy. Ví dụ: đường viền thường xác định chữ thường La Mã "n" không khớp với đường viền dùng để xác định chữ viết thường "n" ở dạng In nghiêng. Thay vì nội suy một đường viền với đường viền khác, trục In nghiêng sẽ chuyển đổi từ đường viền La Mã sang đường viền In nghiêng.
Sau khi chuyển sang In nghiêng, các trục có sẵn cho người dùng sẽ giống với trục dành cho người 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 đối với từng ký tự và sử dụng ở bất cứ đâu trong không gian thiết kế của phông chữ có thể thay đổi. Ví dụ: thiết kế ký hiệu đô la có 2 thanh dọc sẽ hoạt động hiệu quả nhất ở các kích thước điểm lớn hơn, nhưng ở các kích thước điểm nhỏ hơn thì thiết kế chỉ có một thanh sẽ tốt hơn. Khi chúng ta có ít pixel hơn để hiển thị ký tự, thiết kế 2 thanh có thể trở nên khó đọc. Để chống lại điều này, gần giống như trục In nghiêng, việc thay thế ký tự bằng một ký tự khác có thể xảy ra dọc theo trục Kích thước quang tại thời điểm do nhà thiết kế kiểu quyết định.
Tóm lại, trong trường hợp đường viền cho phép, nhà thiết kế kiểu chữ có thể tạo phông chữ nội suy giữa các kiểu khác nhau trong một không gian thiết kế đa chiều. Tính năng này cho phép bạn kiểm soát chi tiết kiểu chữ của mình và cải thiện rất nhiều tính năng.
Định nghĩa về trục
Có 5 Trục đã đăng ký kiểm soát các tính năng đã biết và 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à kiểu nghiêng. Ngoài những phông chữ đó, phông chữ có thể chứa các trục tùy chỉnh. Các đối tượng 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 mong muốn: kích thước của phông chữ, độ dài của swash, chiều cao của các nét nhô lên hoặc kích thước của dấu chấm trên chữ i.
Mặc dù trục có thể kiểm soát cùng một tính năng, nhưng chúng lại có thể sử dụng các giá trị khác nhau. Ví dụ: trong phông chữ biến đổi Oswald và Hepta Slab chỉ có một trục duy nhất là Trọng số, nhưng các phạm vi lại khác nhau – Oswald có cùng phạm vi như trước khi được nâng cấp để có thể biến đổi từ 200 lên 700, nhưng Hepta Slab có trọng số đường viền cực lớn ở 1 lên đến 900.
5 trục đã đăng ký có thẻ viết thường 4 ký tự được dùng để đặt giá trị 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 trục nào có sẵn trong phông chữ thay đổi và họ có thể có những giá trị nào, nên cần phải tìm hiểu đặc điểm của mỗi phông chữ. Tài liệu về phông chữ sẽ cung cấp điều 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à áp dụng các phương pháp hay nhất về kiểu chữ. Mối nguy hiểm với bất kỳ công nghệ mới nào đều có thể là việc sử dụng sai và các chế độ cài đặt quá nghệ thuật hoặc mang tính khám phá cũng có thể làm giảm mức độ dễ đọc của văn bản thực tế. Đối với các tiêu đề, việc khám phá các trục khác nhau để tạo ra các thiết kế nghệ thuật tuyệt vời là điều thú vị, nhưng đối với nội dung sao chép, điều này có nguy cơ khiến văn bản khó đọc được.
Biểu cảm thú vị
Một ví dụ tuyệt vời về tính biểu đạt nghệ thuật được trình bày ở trên, đó là dữ liệu khám phá kiểu chữ Decovar của Mandy Michael.
Bạn có thể xem ví dụ về cách hoạt động và mã nguồn của mẫu trên tại đây.
Hoạt ảnh
Bạn cũng có thể khám phá các nhân vật tạo ảnh động có phông chữ thay đổi. Trên đây là ví dụ về các trục khác nhau được sử dụng với kiểu chữ Zycon. Xem ví dụ về ảnh động trực tiếp trên Trục chính.
Anicons là phông chữ biểu tượng màu động đầu tiên trên thế giới, dựa trên các 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ữ thay đổi và phông chữ màu.
Cự ly
Roboto Flex và Amstelvar cung cấp một bộ "Parametric Axs". 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 màu đen hoặc dương, hình màu trắng hoặc hình âm, chiều và chiều x và y. Tương tự như cách kết hợp màu chính với bất kỳ màu nào khác để điều chỉnh, 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ạ ở trên. Khi sử dụng một ít XTRA theo hướng ngược lại, chiều rộng của các từ sẽ được làm cân bằng.
Nhiều phông chữ trong CSS
Đang tải các tệp phông chữ thay đổi
Các phông chữ biến thể được tải thông qua cơ chế @font-face giống như phông chữ tĩnh truyền thống, nhưng có 2 tính năng nâng cao 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 ta không muốn trình duyệt tải phông chữ xuống nếu phông chữ đó không hỗ trợ phông chữ thay đổi. Vì vậy, chúng ta thêm nội dung mô tả format và tech: một lần trong cú pháp sau này (format('woff2') tech('variations')), một lần ở cú pháp không dùng nữa nhưng được hỗ trợ trong các trình duyệt (format('woff2-variations')). Nếu trình duyệt hỗ trợ phông chữ thay đổi và hỗ trợ cú pháp sắp tới, trình duyệt sẽ sử dụng nội dung 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ì khung này sẽ sử dụng nội dung khai báo thứ hai. Cả hai đều trỏ đến cùng một tệp phông chữ.
2. Kiểu phạm vi: Bạn sẽ thấy chúng tôi cung cấp hai giá trị cho font-weight và font-stretch. Thay vì cho trình duyệt biết phông chữ này cung cấp trọng số cụ thể nào (ví dụ: font-weight: 500;), giờ đây, chúng tôi cung cấp cho trình duyệt phạm vi trọng số mà phông chữ hỗ trợ. Đối với Roboto Flex, trục Weight trong khoảng từ 100 đến 1000 và CSS trực tiếp ánh xạ phạm vi trục đến thuộc tính kiểu font-weight. Bằng cách chỉ định dải ô trong @font-face, mọi giá trị nằm ngoài dải ô này sẽ được "giới hạn" thành giá trị hợp lệ gần nhất. Phạm vi trục Chiều rộng được liên kết 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ì vấn đề này sẽ được xử lý. CSS không chỉ chứa các định dạng và phạm vi nguồn thích hợp, mà Google Fonts cũng sẽ gửi phông chữ dự phòng tĩnh trong trường hợp phông chữ biến đổ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ể đặt một cách đáng tin cậy từ CSS là trục wght đến font-weight và trục wdth thông qua font-stretch.
Thông thường, bạn sẽ đặt font-weight làm từ khoá (light, bold) hoặc
một giá trị số từ 100 đến 900, theo các bước 100. Với nhiều phông chữ, bạn có thể đặt bất kỳ giá trị nào trong phạm vi Độ 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à in nghiêng
Trục ital dành cho các phông chữ chứa cả kiểu thông thường và kiểu in nghiêng. Trục này là công tắc bật/tắt: giá trị 0 ở trạng thái tắt và sẽ thể hiện kiểu thông thường, giá trị 1 sẽ hiện kiểu in nghiêng. Không giống như các trục khác,
không có chuyển đổi. Giá trị của 0.5 sẽ không cho bạn biết "nửa chữ in nghiêng".
Trục slnt khác với kiểu in nghiêng ở chỗ đó 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 lớp này là 0, nghĩa là
các hình dạng chữ cái thẳng đứng mặc định. Roboto Flex có độ nghiêng tối đa là -10 độ, nghĩa là các chữ cái sẽ nghiêng sang phải khi đi từ 0 đến -10.
Việc đặt các trục này thông qua thuộc tính font-style sẽ là trực quan, 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 những trục này là trục tuỳ chỉnh và thiết lập 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
Kiểu chữ có thể được kết xuất với kích thước rất nhỏ (chú thích cuối trang 12px) hoặc rất lớn (tiêu đề 80px). Phông chữ có thể thích ứng với những thay đổi về kích thước này bằng cách thay đổi hình dạng chữ cái cho phù hợp hơn với kích thước. 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 kích thước lớn có thể hưởng lợi từ nhiều chi tiết hơn và nét mỏng hơn.
Chúng tôi đã ra mắt một thuộc tính CSS mới cho trục này: font-optical-sizing. Theo mặc định, thuộc tính này được đặt thành auto, điều này khiến trình duyệt đặt giá trị trục dựa trên font-size. Tức là trình duyệt sẽ tự động chọn kích thước quang học phù hợp nhất. Tuy nhiên, 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 giá trị tuỳ chỉnh cho trục opsz nếu cố ý muốn có kích thước quang 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ó. Do đó, bạn sẽ luôn phải đặt các trục đó thông qua font-variation-settings.
Thẻ cho các trục tuỳ chỉnh luôn được viết hoa để phân biệt với các trục đã đăng ký.
Roboto Flex có một số trục tuỳ chỉnh, và quan trọng nhất là Điểm (GRAD). Trục Điểm rất thú vị vì trục này thay đổi độ đậm của phông chữ mà không thay đổi độ rộng, nên dấu ngắt dòng sẽ không thay đổi. Bằng cách sử dụng trục Lớp, bạn có thể tránh bị buộc phải sử dụng các thay đổi đối với trục Trọng lượng ảnh hưởng đến chiều rộng tổng thể và sau đó thay đổi thành trục Chiều rộng ảnh hưởng đến trọng lượng tổng thể.
Vì GRAD là trục tuỳ chỉnh, với phạm vi từ -200 đến 150 trong Roboto Flex.
Chúng ta cần giải quyết vấn đề này bằng font-variation-settings:
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Nhiều phông chữ trên Google Fonts
Google Fonts mở rộng danh mục bằng phông chữ biến thể và thường xuyên bổ sung phông chữ mới.
Giao diện này hiện nhằm chọn một trong số các 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à giao diện 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 kết hợp URL tới Google Fonts API theo cách thủ công. Phần Tổng quan về phông chữ biến liệt kê tất cả các trục và giá trị.
Công cụ Đườ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 phông chữ đầy đủ của biến.
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 hiện tại, bạn có thể cần sử dụng font-variation-settings làm phương án dự phòng. Và nếu phông chữ của bạn có trục tuỳ chỉnh,
bạn cũng sẽ cần font-variation-settings.
Tuy nhiên, có một chút yêu cầu đối với font-variation-settings. Mọi thuộc tính mà bạn không đặt rõ ràng sẽ tự động được đặt lại về mặc định.
Các giá trị đã đặt trước đây không được kế thừa! Điều này có nghĩa là các 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 đó, thao tác này sẽ áp dụng font-variation-settings: 'GRAD' -200 từ lớp .grade-light. Nhưng 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 ở mức độ nhẹ, không được nghiêng.
May mắn là 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 những 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. Xem bài viết Khắc phục sự cố kế thừa phông chữ thay đổi để được giải thích chi tiết về kỹ thuật này.
Xin lưu ý rằng việc tạo ảnh động các biến CSS không hoạt động (theo thiết kế), vì vậy, những biến thể tương tự sẽ không hoạt động:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
Những ảnh động này sẽ phải diễn ra trực tiếp trên font-variation-settings.
Tăng hiệu suất
Phông chữ biến OpenType cho phép chúng ta lưu trữ nhiều biến thể của một nhóm kiểu trong một tệp phông chữ duy nhất. Monotype đã chạy một thử nghiệm bằng cách kết hợp 12 phông chữ đầu vào để tạo ra 8 trọng số, trên 3 chiều rộng, cho cả kiểu In nghiêng và La Mã. Việc lưu trữ 48 phông chữ riêng lẻ trong một tệp phông chữ biến đổi đồng nghĩa với việc giảm 88% kích thước tệp.
Tuy nhiên, nếu đang sử dụng một phông chữ duy nhất như Roboto Regular và không có phông chữ nào khác, thì bạn có thể không nhận được mức tăng thuần về kích thước phông chữ nếu chuyển sang một phông chữ biến đổi có nhiều trục. Như thường lệ, việc 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 ảnh động 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ù điều này sẽ cải thiện khi tính năng hỗ trợ phông chữ thay đổi trong các trình duyệt trở nên hoàn thiện hơn, nhưng vấn đề này có thể được giảm bớt phần nào bằng cách chỉ tạo ảnh động cho phông chữ hiện đang hiển thị trên màn hình. Đoạn mã tiện dụng 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 ở 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 tương tác của người dùng, bạn nên điều tiết hoặc thoát sự kiện nhập. Điều này sẽ ngăn trình duyệt hiển thị các thực thể của phông chữ biến đổi rất ít so với phiên bản trước, mắt người sẽ không thấy sự khác biệt.
Nếu đang dùng Google Fonts, bạn nên kết nối trước với https://fonts.gstatic.com, miền lưu trữ phông chữ của Google. Việc này sẽ đảm bảo trình duyệt sớm biết nơi cần lấy phông chữ khi gặp chúng 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: bạn càng cho phép trình duyệt thiết lập kết nối mạng sớm thì trình duyệt càng có thể tải phông chữ của bạn xuống sớm hơn.
Tìm thêm các mẹo về hiệu suất để tải Google Fonts trong Google Fonts nhanh nhất.
Dự phòng và hỗ trợ trình duyệt
Tất cả các trình duyệt hiện đại đều hỗ trợ nhiều phông chữ. Trong trường hợp cần hỗ trợ các trình duyệt cũ, bạn có thể chọn xây dựng trang web bằng phông chữ tĩnh và sử dụng phông chữ biến số dưới dạng 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ũ hơn, văn bản có lớp .super-bold sẽ được hiển thị ở chế độ in đậm thông thường, vì đó là phông chữ đậm duy nhất chúng tôi hiện có. Khi hỗ trợ nhiều phông chữ, chúng ta thực sự có thể sử dụng độ đậm lớn 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ị bất kỳ kiểu nào. Nếu đây là vấn đề, bạn luôn có thể sử dụng một trong các cách tấn công kiểu cũ để nhắm mục tiêu đế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ẽ đảm nhận việc tải 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 khoảng trọng số 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ữ thay đổi sẽ nhận được phông chữ thay đổi và sẽ có mọi độ đậm trong khoảng từ 200 đến 700. Các trình duyệt cũ hơn sẽ nhận được các phông chữ tĩnh riêng lẻ cho từng kích thước. Trong trường hợp này, điều này có nghĩa là họ sẽ tải 6 tệp phông chữ xuống: một tệp có độ đậm 200, một tệp có độ đậm 300, v.v.
Cảm ơn bạn!
Bài viết này sẽ chỉ có thể thực hiện được với sự trợ giúp của những người sau đây:
- RIGHTafa Kurtuldu, nhà thiết kế trải nghiệm người dùng và nhân viên hỗ trợ thiết kế tại Google
- Roel Nieskens, chuyên gia thiết kế/nhà phát triển trải nghiệm người dùng 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 viết kiểu chữ tại Font Bureau
- Laurence Penney, nhà phát triển của axis-praxis.org
- Mandy Michael, nhà phát triển variablefonts.dev
Hình ảnh chính của Bruno Martins trên Unsplash.