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 phông chữ biến là gì, lợi ích của phông chữ biến và cách sử dụng phông chữ biến trong công việc. Trước tiên, hãy cùng xem lại cách hoạt động của kiểu chữ trên web và những đổi mới mà phông chữ mang lại.
Khả năng tương thích với trình duyệt
Kể từ tháng 5 năm 2020, phông chữ biến đổi được hỗ trợ trong hầu hết các trình duyệt. Xem bài viết Tôi có thể sử dụng phông chữ có thể thay đổi không? và Phương án dự phòng.
Giới thiệu
Các nhà phát triển thường sử dụng thuật ngữ phông chữ và kiểu chữ thay thế cho nhau. Tuy nhiên, có một sự khác biệt: Phông 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 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à những gì bạn nhìn thấy và phông chữ là những gì 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 và gia đình. Kiểu là một kiểu chữ đơn và cụ thể, chẳng hạn như Đậm nghiêng, còn bộ là tập hợp đầy đủ các kiểu.
Trước khi thay đổi phông chữ, mỗi kiểu được triển khai dưới dạng một tệp phông chữ riêng biệt. Với phông chữ biến, tất cả các kiểu có thể được chứa 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 họ có thể sử dụng (xác định theo loại máy in sẽ sử dụng), v.v. Tuy nhiên, họ có thể sử dụng nhiều kiểu chữ như họ muốn. Điều này có nghĩa là kiểu chữ của các phương tiện in thường phong phú và tinh vi, nhờ đó mang lại trải nghiệm đọc thực sự thú vị. Hãy nghĩ đến lần gần đây nhất bạn thích thú khi xem 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 hạn chế quan trọng là chi phí băng thông liên quan đến thiết kế của chúng ta. Đây là đ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 ta yêu cầu người dùng tải một tệp phông chữ riêng xuống, điều này làm tăng độ trễ và thời gian hiển thị trang. Chỉ bao gồm kiểu chữ Thường và Đậm, cùng với kiểu chữ nghiêng tương ứng, có thể lên đến 500 KB dữ liệu phông chữ. Điều này xảy ra ngay cả trước khi chúng ta xử lý cách hiển thị phông chữ, các mẫu dự phòng mà chúng ta 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ữ cung cấp nhiều kiểu chữ hơn, từ độ đậm Mỏng đến Đậm, chiều rộng hẹp và rộng, nhiều chi tiết về kiểu chữ và thậm chí là thiết kế dành riêng cho kích thước (đượ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 tệp phông chữ mới cho mọi kiểu (hoặc kết hợp nhiều 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.
Phân tích cấu trúc của phông chữ biến đổi
Phông chữ thay đổi giải quyết những thách thức này bằng cách gói các kiểu vào một tệp duy nhất.
Phương pháp này hoạt động bằng cách bắt đầu với kiểu trung tâm 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 với độ đậm 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 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ụ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 riêng lẻ đều có thể nằm dọc theo một trục và được gọi là "phiên bản" 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 số 600 được gọi là SemiBold.
Phông chữ biến thể Roboto Flex có ba kiểu cho trục Độ đậm. Kiểu thông thường nằm ở giữa, và có hai kiểu ở hai đầu đối diện của trục, một kiểu đậm hơn và một kiểu nhạt hơn. Trong số này, bạn có thể chọn trong số 900 thực thể:
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 các thành phần này vì tất cả đều có cùng kiểu mặc định. Phông chữ Roboto có 3 kiểu theo trục Chiều rộng: Thường xuyên nằm ở giữa trục, còn 2 kiểu hẹp và rộng hơn nằm ở mỗi đầu. Các đối số này cung cấp tất cả chiều rộng của kiểu Thông thường và kết hợp với trục Trọng số để cung cấp tất cả chiều rộng cho mọi trọng số.
Điều này có nghĩa là có hàng nghìn kiểu! Điều này có vẻ như là quá mức cần thiết, 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ữ. Ngoài ra, nếu không có ảnh hưởng về hiệu suất, các nhà phát triển web có thể sử dụng một vài hoặc nhiều kiểu tuỳ thích – tuỳ ý họ.
In nghiêng
Cách xử lý phông chữ in nghiêng trong phông chữ biến đổi rất thú vị vì có hai phương pháp khác nhau. Các phông chữ như Helvetica hoặc Roboto có các đường viền tương thích với nội suy, vì vậy, kiểu chữ Roman và Italic có thể được nội suy giữa các kiểu chữ này và trục Slant (Góc nghiêng) có thể được dùng để chuyển từ kiểu chữ Roman sang kiểu chữ Italic.
Các kiểu chữ khác (chẳng hạn như Garamond, Baskerville hoặc Bodoni) có đường bao ký tự kiểu La Mã và In nghiêng không tương thích với nội suy. Ví dụ: các đường viền thường xác định chữ "n" viết thường theo kiểu chữ La Mã không khớp với các đường viền dùng để xác định chữ "n" viết thường theo kiểu chữ in nghiêng. Thay vì nội suy một đường viền với đường viền khác, trục Italic (Chữ in nghiêng) sẽ chuyển đổi từ đường viền Roman sang đường viền Italic.
Sau khi chuyển sang 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 chữ La Mã, vì bộ ký tự phải giống nhau.
Bạn cũng có thể thấy khả năng thay thế ký tự đối với các ký tự riêng lẻ và được sử dụng ở bất kỳ đâu trong không gian thiết kế của phông chữ thay đổi. Ví dụ: thiết kế dấu đô la có hai thanh dọc hoạt động tốt nhất ở kích thước điểm lớn hơn, nhưng ở kích thước điểm nhỏ hơn, thiết kế chỉ có một thanh sẽ tốt hơn. Khi chúng ta có ít pixel để hiển thị ký tự hơn, thiết kế hai thanh có thể trở nên khó đọc. Để chống lại điều này, tương tự như trục Italic, việc thay thế một 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 học tại một điểm do nhà thiết kế phông chữ quyết định.
Tóm lại, khi đường viền cho phép, nhà thiết kế phông chữ có thể tạo phông chữ nội suy giữa nhiều kiểu trong không gian thiết kế nhiều chiều. Nhờ vậy, bạn có thể kiểm soát chi tiết kiểu chữ và khai thác rất nhiều sức mạnh.
Đị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à in nghiêng. Ngoài những trục này, phông chữ có thể chứa các trục tuỳ 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 serif, chiều dài của phần chữ nghiêng, chiều cao của phần góc nghiêng 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 Oswald và Hepta Slab, chỉ có một trục là Độ đậm, nhưng các dải là khác nhau – Oswald có cùng dải như trước khi được nâng cấp thành biến, từ 200 đến 700, nhưng Hepta Slab có độ đậm cực nhỏ ở mức 1 và tăng lên đến 900.
Năm trục đã đăng ký có các thẻ viết thường gồm 4 ký tự 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 những trục có sẵn trong phông chữ biến và những giá trị mà các trục đó có thể có, nên điều quan trọng là phải 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ữ sẽ 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 nguy hiểm của mọi công nghệ mới đều có thể là việc sử dụng sai mục đích, đồng thời các chế độ cài đặt mang tính nghệ thuật hoặc mang tính khám phá quá cao cũng có thể làm giảm mức độ dễ đọ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 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 chính, việc này có nguy cơ khiến văn bản khó đọc.
Biểu cảm phấn khích
Một ví dụ tuyệt vời về cách thể hiện nghệ thuật được hiển thị ở trên, đó là việc khám phá phông chữ Decovar của Mandy Michael.
Bạn có thể xem ví dụ và mã nguồn hoạt động của mẫu trên tại đây.
Hoạt ảnh
Bạn cũng có thể khám phá việc tạo ảnh động cho các ký tự bằng phông chữ biến thể. 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 Axis Praxis.
Anicons là phông chữ biểu tượng màu độ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ữ thay đổi và phông chữ màu.
Finesse
Roboto Flex và Amstelvar cung cấp một bộ "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 phối màu chính với bất kỳ màu nào khác để điều chỉnh, bạn có thể dùng 4 khía cạnh này để tinh chỉnh mọi trục 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 lần hiển thị, như trình bày ở trên. Khi sử dụng một ít XTRA theo hướng ngược lại, chiều rộng của từ sẽ được cân bằng.
Phông chữ biến đổi trong CSS
Tải tệp phông chữ biến đổi
Phông chữ biến đổi được tải thông qua cơ chế @font-face giống như phông chữ web tĩnh truyền thống, nhưng có hai 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 tôi không muốn trình duyệt tải phông chữ xuống nếu phông chữ không hỗ trợ các phông chữ biến đổ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 tương lai (format('woff2') tech('variations')), một lần trong cú pháp không dùng nữa nhưng được hỗ trợ trong cú pháp của các trình duyệt (format('woff2-variations')). Nếu trình duyệt hỗ trợ biến và hỗ trợ cú pháp phông chữ sắp tới, thì trình duyệt sẽ sử dụng nội dung khai báo đầu tiên. Nếu hỗ trợ phông chữ biến và cú pháp hiện tại, thì trình biên dịch 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. Phạm vi kiểu: Bạn sẽ nhận thấy chúng ta đang 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 độ đậm cụ thể nào (ví dụ: font-weight: 500;), giờ đây, chúng tôi sẽ 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 Trọng số có phạm vi từ 100 đến 1000 và CSS 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 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 API Phông chữ Google, thì tất cả những việc 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 không hỗ trợ phông chữ biến đổi.
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ị số từ 100 đến 900, theo bước 100. Với phông chữ biến thể, 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 phông chữ nghiêng và phông chữ xiên
Trục ital dành cho các phông chữ chứa cả kiểu thông thường và kiểu nghiêng. Trục này là nút bật/tắt: giá trị 0 đang tắt và sẽ hiển thị kiểu thông thường, giá trị 1 sẽ hiển thị kiểu in nghiêng. Không giống như các trục khác, không có quá trình chuyển đổi. Giá trị 0.5 sẽ không cho bạn "nửa in nghiêng".
Trục slnt khác với kiểu in nghiêng ở chỗ đây không phải là một kiểu mới mà chỉ là kiểu nghiêng kiểu thông thường. Theo mặc định, giá trị của giá trị này là 0, nghĩa là hình dạng chữ cái đứng mặc định. Roboto Flex có độ lệch 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.
Bạn có thể thiết lập các trục này một cách trực quan 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 các trục này là trục tuỳ chỉnh và thiết lập các trục này 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
Phông 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ữ cái để phù hợp hơn với kích thước của phông chữ. Kích thước nhỏ có thể phù hợp hơn khi không 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 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 quang học tốt 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 giá trị tuỳ chỉnh cho trục opsz, nếu bạn cố ý muốn kích thước quang học không khớp với kích thước phông 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 trục tuỳ chỉnh luôn viết hoa để phân biệt với trục đã đăng ký.
Roboto Flex cung cấp một số trục tuỳ chỉnh, trong đó quan trọng nhất là Grade (GRAD). Trục Grade rất thú vị vì nó thay đổi độ đậm của phông chữ mà không thay đổi chiều rộng, vì vậy, các dấu ngắt dòng sẽ không thay đổi. Bằng cách chơi với trục Độ dốc, bạn có thể tránh bị buộc phải điều chỉnh các thay đổi đối với trục Trọng số ảnh hưởng đến chiều rộng tổng thể, sau đó thay đổi trục Chiều rộng ảnh hưởng đến trọng số 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 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;
}
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ữ biến và thường xuyên thêm các phông chữ mới.
Giao diện hiện đang nhắm đến việc chọn các thực thể đơn lẻ từ phông chữ: bạn chọn biến thể bạn 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 đến API Phông chữ Google. 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 toàn bộ phông chữ biến đổi.
Kế thừa chế độ cài đặt biến thể phông chữ
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 dựa vào font-variation-settings làm phương án dự phòng. Nếu phông chữ của bạn có các trục tuỳ chỉnh, thì bạn cũng cần có 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 rõ ràng sẽ tự động được đặt lại về giá trị mặc định.
Các giá trị đã đặt trước đó 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 đó, lớp này 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 nhạt, nhưng không bị 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 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 chồng, vì vậy, nếu một phần tử (hoặc một trong các phần tử mẹ) đã đặ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 lỗi kế thừa phông chữ biến để biết nội dung giải thích chuyên sâu về kỹ thuật này.
Xin lưu ý rằng việc tạo ảnh động cho các biến CSS sẽ không hoạt động (theo thiết kế), vì vậy, các mã 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 trực tiếp 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 bộ 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, trên cả kiểu chữ Italic và Roman. Việc lưu trữ 48 phông chữ riêng lẻ trong một tệp phông chữ biến đổi có nghĩa là kích thước tệp giảm 88%.
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, bạn có thể không thấy sự gia tăng về kích thước phông chữ nếu chuyển sang phông chữ biến thiên có nhiều trục. Như thường lệ, điều này phụ 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 cho phông chữ giữa các chế độ cài đặt có thể gây ra vấn đề về hiệu suất. Mặc dù điều này sẽ cải thiện khi khả năng hỗ trợ phông chữ đa dạng trong các trình duyệt trở nên hoàn thiện hơn, nhưng vấn đề có thể được giảm bớt một chút bằng cách chỉ tạo ảnh động cho phông chữ hiện có 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 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 làm giảm độ trễ các sự kiện đầu vào. Đ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 thay đổi rất ít so với thực thể trước đó mà mắt người không thấy được sự khác biệt.
Nếu đang sử 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. Điều này sẽ đảm bảo trình duyệt sớm biết nơi lấy phông chữ khi gặp 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: bạn cho phép trình duyệt thiết lập kết nối mạng càng sớm thì trình duyệt có thể tải phông chữ của bạn xuống càng sớm.
Tìm thêm các mẹo về hiệu suất để tải Google Fonts trong phần Google Fonts nhanh nhất.
Bản dự phòng và hỗ trợ trình duyệt
Tất cả trình duyệt hiện đại đều hỗ trợ phông chữ biến. 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ữ biến thể làm tính năng nâng cao 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ẽ hiển thị ở chế độ in đậm thông thường, vì đó là phông chữ đậm duy nhất chúng tôi có sẵn. Khi phông chữ thay đổi được hỗ trợ, chúng tôi thực sự có thể sử dụng trọng số lớn nhất là 1.000.
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 những mẹo hay qua trường học cũ để nhắm đến các trình duyệt cũ có liên quan.
Nếu bạn đang sử dụng API Phông chữ Google, API này sẽ giúp 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 phạm vi độ đậm 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ữ biến sẽ nhận được phông chữ biến và có mọi độ đậm từ 200 đến 700. Các trình duyệt cũ sẽ được phân phát phông chữ tĩnh riêng lẻ cho mỗi độ đậm. Trong trường hợp này, tức là họ sẽ tải 6 tệp phông chữ: một cho độ đậm 200, một cho độ đậm 300, v.v.
Cảm ơn bạn!
Bài viết này chỉ có thể được thực hiện với 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ế trải nghiệm người dùng/nhà phát triển và chuyên gia về kiểu chữ của Kabisa
- Dave Crossland, Nhà quản lý chương trình, Google Fonts
- David Berlow, nhà thiết kế 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
Hình ảnh chính của Bruno Martins trên Unsplash.