Giờ đây, khi phông chữ trên web tải xong, bạn hiện có thể điều chỉnh tỷ lệ để chuẩn hoá cỡ chữ trong tài liệu và tránh xáo trộn bố cục khi chuyển đổi giữa các phông chữ
Hãy xem xét bản minh hoạ sau đây, trong đó font-size là một 64px nhất quán và điểm khác biệt duy nhất giữa mỗi tiêu đề này là font-family. Các ví dụ ở bên trái chưa được điều chỉnh và có kích thước cuối cùng không nhất quán. Các ví dụ ở bên phải sử dụng size-adjust để đảm bảo 64px có kích thước cuối cùng nhất quán.
Bài đăng này sẽ khám phá một mã mô tả phông chữ CSS mới có tên là size-adjust. Báo cáo này cũng minh hoạ một số cách để sửa và chuẩn hoá kích thước phông chữ nhằm mang lại trải nghiệm mượt mà hơn cho người dùng, hệ thống thiết kế nhất quán và bố cục trang dễ dự đoán hơn. Một trường hợp sử dụng quan trọng là tối ưu hoá khả năng kết xuất phông chữ trên web để ngăn ngừa mức thay đổi bố cục tích luỹ (CLS).
Đây là bản minh hoạ tương tác của không gian sự cố. Hãy thử thay đổi kiểu chữ trong trình đơn thả xuống rồi quan sát:
- Sự khác biệt về chiều cao trong kết quả.
- Nội dung gây khó chịu thường xuyên thay đổi.
- Di chuyển các khu vực mục tiêu tương tác (trình đơn thả xuống sẽ thay đổi!).
Cách điều chỉnh tỷ lệ phông chữ bằng size-adjust
Giới thiệu về cú pháp:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- Tạo một kiểu chữ tuỳ chỉnh có tên
Adjusted Typeface. - Sử dụng
size-adjustđể tăng tỷ lệ của mỗi ký tự lên 150% kích thước mặc định. - Chỉ ảnh hưởng đến một kiểu chữ đã nhập.
Sử dụng kiểu chữ tuỳ chỉnh ở trên như sau:
h1 {
font-family: "Adjusted Typeface";
}
Giảm thiểu CLS bằng tính năng hoán đổi phông chữ liền mạch
Trong ảnh gif sau đây, hãy xem các ví dụ ở bên trái và sự thay đổi khi phông chữ được thay đổi. Đây chỉ là một ví dụ nhỏ có một phần tử dòng tiêu đề duy nhất và vấn đề này rất dễ nhận thấy.
Để cải thiện khả năng hiển thị phông chữ, bạn nên sử dụng kỹ thuật hoán đổi phông chữ. Kết xuất phông chữ hệ thống tải nhanh để hiển thị nội dung trước, sau đó hoán đổi phông chữ đó với phông chữ web khi phông chữ web tải xong. Điều này mang đến cho bạn những gì tốt nhất ở cả hai mặt: nội dung sẽ hiển thị sớm nhất có thể và bạn sẽ có được một trang được tạo kiểu đẹp mà không phải hy sinh thời gian xem nội dung của người dùng. Tuy nhiên, vấn đề là đôi khi khi phông chữ web tải, phông chữ đó sẽ thay đổi toàn bộ trang vì kích thước chiều cao hộp hiển thị hơi khác một chút.
Bằng cách đặt size-adjust vào quy tắc @font-face, thao tác này sẽ thiết lập mức điều chỉnh ký tự chung cho mặt phông chữ. Việc xác định thời gian phù hợp sẽ dẫn đến sự thay đổi nhỏ về hình ảnh, một hoán đổi liền mạch. Để tạo ra thao tác hoán đổi liền mạch, hãy điều chỉnh bằng tay hoặc thử dùng máy tính điều chỉnh kích thước này của Malte Ubl.
@font-face đã điều chỉnh trước.
Ở đầu bài đăng này, việc dùng thử và lỗi đã thực hiện để khắc phục vấn đề về kích thước phông chữ. size-adjust đã được nhắc trong mã nguồn cho đến khi cùng một tiêu đề trong Cookie và Arial kết xuất 64px tương tự như Press Start 2P đã thực hiện một cách tự nhiên.
Tôi đã căn chỉnh hai phông chữ cho vừa với một cỡ chữ mục tiêu.
@font-face {
font-family: 'Adjusted Arial';
size-adjust: 86%;
src: local(Arial);
}
@font-face {
font-family: 'Cookie';
size-adjust: 90.25%;
src: url(...woff2) format('woff2');
}
Hiệu chỉnh phông chữ
Với tư cách là tác giả, bạn sẽ xác định(các) mục tiêu hiệu chỉnh để chuẩn hoá tỷ lệ phông chữ. Bạn có thể chuẩn hoá theo phông chữ Times, Phông chữ hệ thống hoặc phông chữ hệ thống, sau đó điều chỉnh phông chữ tuỳ chỉnh cho phù hợp. Hoặc bạn có thể điều chỉnh phông chữ trên máy cho phù hợp với phông chữ bạn tải xuống.
Chiến lược hiệu chỉnh size-adjust:
- Đích từ xa:
Điều chỉnh phông chữ trên máy cho phông chữ đã tải xuống. - Đích cục bộ:
Điều chỉnh phông chữ đã tải xuống cho phù hợp với phông chữ đích cục bộ.
Ví dụ 1: Mục tiêu từ xa
Hãy xem xét đoạn mã sau đây để điều chỉnh phông chữ có sẵn trên máy cho phù hợp với phông chữ tuỳ chỉnh src từ xa. Phông chữ tuỳ chỉnh từ xa là mục tiêu để hiệu chỉnh, phông chữ thương hiệu có thể là:
@font-face {
font-family: "Adjusted Regular Arial For Brand";
src: local(Arial);
size-adjust: 90%;
}
@font-face {
font-family: "Rad Brand";
src: url(some/path/to/a.woff2) format('woff2');
}
html {
font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}
Trong ví dụ này, phông chữ cục bộ{/9} sẽ điều chỉnh theo dự đoán về phông chữ tuỳ chỉnh đã tải để hoán đổi liền mạch.
Chiến lược này có lợi thế là cung cấp cho nhà thiết kế và nhà phát triển cùng một phông chữ để định cỡ và kiểu chữ. Thương hiệu là mục tiêu hiệu chỉnh. Đây là tin vui dành cho các hệ thống thiết kế.
Việc lấy một kiểu chữ thương hiệu làm mục tiêu cũng chính là cách tính toán của Malte. Chọn một phông chữ của Google và Google sẽ tính toán cách điều chỉnh phông chữ đó để hoán đổi liền mạch với phông chữ đó. Dưới đây là ví dụ về Roboto CSS từ máy tính, trong đó Roboto được tải và đặt tên là "Roboto-fallback":
@font-face {
font-family: "Roboto-fallback";
size-adjust: 100.06%;
src: local("Arial");
}
Để tạo mức điều chỉnh hoàn toàn trên nhiều nền tảng, hãy xem ví dụ sau, ví dụ cung cấp 2 phông chữ dự phòng cục bộ được điều chỉnh để dự đoán phông chữ thương hiệu.
@font-face {
font-family: "Roboto-fallback-1";
size-adjust: 100.06%;
src: local("Arial");
}
@font-face {
font-family: "Roboto-fallback-2";
size-adjust: 99.94%;
src: local("Arimo");
}
@font-face {
font-family: "Roboto Regular";
src: url(some/path/to/roboto.woff2) format('woff2');
}
html {
font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}
Ví dụ 2: Mục tiêu địa phương
Hãy xem xét đoạn mã sau đây, đoạn mã này sẽ điều chỉnh phông chữ tuỳ chỉnh của thương hiệu cho phù hợp với phông chữ của bạn:
@font-face {
font-family: "Rad Brand - Adjusted For Arial";
src: url(some/path/to/a.woff2) format('woff2');
size-adjust: 110%;
}
html {
font-family: "Rad Brand - Adjusted For Arial", Arial;
}
Chiến lược này có lợi thế là hiển thị mà không cần điều chỉnh, sau đó điều chỉnh mọi phông chữ sắp tới cho phù hợp.
Điều chỉnh chi tiết hơn bằng ascent-override, descent-override và line-gap-override
Nếu việc điều chỉnh tỷ lệ chung của ký tự không đủ để điều chỉnh cho các chiến lược thiết kế hoặc tải của bạn, thì sau đây là một số tuỳ chọn điều chỉnh tinh chỉnh hơn hoạt động cùng với size-adjust. Các thuộc tính ascent-override, descent-override và line-gap-override hiện được triển khai trong Chromium 87 trở lên và Firefox 89 trở lên.
ascent-override
Chỉ số mô tả ascent-override xác định chiều cao trên đường cơ sở của phông chữ.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
Dòng tiêu đề màu đỏ (chưa được điều chỉnh) có khoảng trống phía trên chữ cái viết hoa A và O, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh để chiều cao giới hạn vừa khít với tổng thể hộp giới hạn.
descent-override
Chỉ số mô tả descent-override xác định chiều cao dưới đường cơ sở của phông chữ.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
Dòng tiêu đề màu đỏ (chưa được điều chỉnh) có khoảng trống bên dưới đường cơ sở D và O, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh để các chữ cái nằm vừa khít trên đường cơ sở.
line-gap-override
Chỉ số mô tả line-gap-override xác định chỉ số khoảng cách dòng cho phông chữ.
Đây là khoảng cách phông chữ được đề xuất hoặc ở đầu bên ngoài.
@font-face {
font-family: "Line Gap Adjusted Arial";
src: local(Arial);
line-gap-override: 50%;
}
Dòng tiêu đề màu đỏ (chưa được điều chỉnh) không có line-gap-override, về cơ bản là ở 0%, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh thêm 50%, tạo ra khoảng trống phía trên và phía dưới các chữ cái tương ứng.
Kết hợp kiến thức đã học
Mỗi chế độ ghi đè này cung cấp thêm một cách để cắt bỏ phần dư thừa khỏi hộp giới hạn văn bản an toàn của web. Bạn có thể điều chỉnh hộp văn bản để có bản trình bày chính xác.
Kết luận
Tính năng @font-face size-adjust CSS là một cách thú vị để tuỳ chỉnh hộp giới hạn văn bản của bố cục web nhằm cải thiện trải nghiệm hoán đổi phông chữ, từ đó tránh việc thay đổi bố cục cho người dùng. Để tìm hiểu thêm, hãy xem các tài nguyên sau:
- Thông số kỹ thuật phông chữ CSS cấp 5
- Size Adjust trên MDN
- Hoán đổi liền mạch trình tạo @font-face
- Điểm số tổng hợp về mức thay đổi bố cục (CLS) trên web.dev
- Phương pháp mới để giảm tác động tải phông chữ: Phần mô tả phông chữ của CSS
Ảnh chụp của Kristian Strand trên Unsplash