Điều chỉnh kích thước CSS cho @font-face

Khi một phông chữ web tải, giờ đây, bạn có thể điều chỉnh tỷ lệ của phông chữ đó để chuẩn hoá kích thước phông chữ của tài liệu và ngăn việc thay đổi bố cục khi chuyển đổi giữa các phông chữ

Adam Argyle

Hãy xem xét bản minh hoạ sau đây, trong đó font-size là 64px nhất quán và sự 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 phần mô tả phông chữ mới của CSS có tên là size-adjust. Bài viết 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 người dùng mượt mà hơn, 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á việc kết xuất phông chữ web để ngăn chặn sự thay đổi bố cục tích luỹ (CLS).

Dưới đây là bản minh hoạ tương tác của không gian xảy ra sự cố. Hãy thử thay đổi kiểu chữ bằng trình đơn thả xuống và quan sát:

1. Sự khác biệt về chiều cao trong kết quả.
2. Thay đổi nội dung gây khó chịu về mặt hình ảnh.
3. Di chuyển các khu vực mục tiêu tương tác (trình đơn thả xuống sẽ di chuyển xung quanh!).

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');
}

1. Tạo một kiểu chữ tuỳ chỉnh có tên Adjusted Typeface.
2. Sử dụng size-adjust để tăng tỷ lệ mỗi ký tự lên 150% kích thước mặc định.
3. 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 (Mức thay đổi bố cục tích luỹ) nhờ hoán đổi phông chữ liền mạch

Trong ảnh gif sau, hãy xem các ví dụ ở bên trái và sự thay đổi khi phông chữ thay đổi. Đây chỉ là một ví dụ nhỏ với một phần tử 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 có thể 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 để cho thấy nội dung trước, sau đó hoán đổi với phông chữ trên web khi phông chữ trên web tải xong. Điều này mang lại cho bạn lợi ích tốt nhất ở cả hai thế giới: nội dung hiển thị sớm nhất có thể và bạn sẽ có được trang được tạo kiểu độc đáo mà không hy sinh thời gian của người dùng cho nội dung. Tuy nhiên, vấn đề là đôi khi phông chữ trên web tải, phông chữ đó làm thay đổi toàn bộ trang vì kích thước chiều cao của hộp sẽ hơi khác một chút.

Bằng cách đặt size-adjust vào quy tắc @font-face, quy tắc này sẽ đặt một mức điều chỉnh ký tự chung cho phông chữ. Việc căn thời gian đúng cách sẽ giúp thay đổi hình ảnh ở mức tối thiểu, hoán đổi liền mạch. Để tạo một hoán đổi liền mạch, hãy điều chỉnh thủ công hoặc thử dùng công cụ tính điều chỉnh kích thước này của Malte Ubl.

Ở đầu bài đăng này, chúng tôi đã khắc phục vấn đề về kích thước phông chữ bằng cách thử và sai. size-adjust được nhắc nhở trong mã nguồn cho đến khi cùng một tiêu đề trong Cookie và Arial hiển thị cùng một 64px như Press Start 2P đã làm tự nhiên. Tôi đã căn chỉnh hai phông chữ theo 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');
}

Đang 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á trên Times, Arial hoặc phông chữ hệ thống, sau đó điều chỉnh phông chữ tuỳ chỉnh để khớp. Hoặc bạn có thể điều chỉnh phông chữ trên máy cho phù hợp với nội dung bạn tải xuống.

Chiến lược hiệu chỉnh size-adjust:

1. Mục tiêu từ xa:
   Điều chỉnh phông chữ trên máy theo phông chữ đã tải xuống.
2. Mục tiêu cục bộ:
   Điều chỉnh phông chữ đã tải xuống theo phông chữ mục tiêu 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 cục bộ cho phù hợp với kích thước của phông chữ tuỳ chỉnh src từ xa. Phông chữ tuỳ chỉnh từ xa là mục tiêu của hiệu chuẩn, có thể là phông chữ thương hiệu:

@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ộ Arial đang điều chỉnh để dự kiến một phông chữ tuỳ chỉnh đã tải, nhằm 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ữ để điều chỉnh kích thước và kiểu chữ. Thương hiệu là mục tiêu hiệu chỉnh. Đây là tin vui cho các hệ thống thiết kế.

Việc đặt phông chữ thương hiệu làm mục tiêu cũng là cách hoạt động của máy tính của Malte. Chọn một Phông chữ Google và công cụ này sẽ tính toán cách điều chỉnh Arial để 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 đó, phông chữ của phông chữ Roboto được tải và có tên là "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Để tạo chế độ điều chỉnh hoàn toàn trên nhiều nền tảng, hãy xem ví dụ sau đây cung cấp 2 phông chữ dự phòng cục bộ đã điều chỉnh để dự kiế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 để điều chỉnh phông chữ tuỳ chỉnh của thương hiệu cho phù hợp với Arial:

@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ó ưu điểm 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.

Tinh chỉnh nhờ 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 thiết kế hoặc chiến lược tải của bạn, thì sau đây là một số tuỳ chọn tinh chỉnh hiệu quả hơn 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 điều chỉnh) có khoảng trống phía trên chữ cái in hoa A và O, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh để chiều cao chữ in hoa vừa khít với hộp giới hạn tổng thể.

descent-override

Phần mô tả descent-override xác định chiều cao bên 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 điều chỉnh) có khoảng trống bên dưới dò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 dò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 dòng hoặc khoảng cách dòng bên ngoài được đề xuất cho phông chữ.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Dòng tiêu đề màu đỏ (chưa điều chỉnh) không có line-gap-override, về cơ bản nằm ở 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 chữ cái cho phù hợp.

Kết hợp kiến thức đã học

Mỗi cơ chế ghi đè này cung cấp một cách khác để cắt bớt phần 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 để trình bày chính xác.

Kết luận

Tính năng CSS @font-face size-adjust 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ữ, nhờ đó tránh được tình trạng 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:

• Quy cách phông chữ CSS cấp 5
• Điều chỉnh kích thước trên MDN
• Trình tạo hoán đổi liền mạch @font-face
• Điểm số tổng hợp về mức thay đổi bố cục (CLS) trên web.dev
• Một cách mới để giảm tác động của việc tải phông chữ: Chỉ số mô tả phông chữ CSS

Ảnh chụp của Kristian Strand trên Unsplash