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

Khi phông chữ trên web tải, giờ đây, bạn có thể điều chỉnh tỷ lệ của phông chữ đó để chuẩn hoá cỡ chữ của tài liệu và ngăn chặn sự 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à 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 là kích thước cuối cùng nhất quán.

Trong ví dụ này, các công cụ gỡ lỗi bố cục lưới CSS của Công cụ dành cho nhà phát triển của Chrome được dùng để hiện chiều cao.

Bài đăng này khám phá một trình mô tả font-face CSS mới có tên là size-adjust. Bài viết này cũng minh hoạ một số cách để điều chỉnh 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ễ đoán hơn. Một trường hợp sử dụng quan trọng là tối ưu hoá quá trình hiển thị phông chữ trên web để ngăn chặn mức thay đổi bố cục tích luỹ (CLS).

Browser Support

• 92
• 92
• 92
• 17

Source

Sau đây là một bản minh hoạ tương tác về không gian vấn đề. 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. Nội dung thay đổi đột ngột về mặt hình ảnh.
3. Di chuyển các vùng mục tiêu tương tác (trình đơn thả xuống nhảy xung quanh!).

Thuật ngữ chính: Bộ phông chữ so với Phông chữ: Phông chữ được gọi bằng tên bộ phông chữ cộng với kiểu chữ. Helvetica Bold là chỉ kiểu chữ đậm cụ thể, còn Helvetica là chỉ chung cho toàn bộ họ gồm hơn 8 kiểu chữ (bình thường, đậm, nghiêng, v.v.). Với CSS @font-face, bạn sẽ xử lý các kiểu chữ, mặc dù để sử dụng các kiểu chữ đó, bạn cần viết font-family.

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 là Adjusted Typeface.
2. Sử dụng size-adjust để tăng tỷ lệ mỗi glyph lên 150% kích thước mặc định.
3. Chỉ ảnh hưởng đến một kiểu chữ được nhập.

Sử dụng kiểu chữ tuỳ chỉnh ở trên như sau:

h1 {
  font-family: "Adjusted Typeface";
}

Cảnh báo: Nếu tiêu đề thứ hai trong bản minh hoạ ở trên không lớn hơn tiêu đề thứ nhất, thì trình duyệt của bạn không hỗ trợ size-adjust.

Giảm CLS bằng cách 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à cách có sự thay đổi khi phông chữ được 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.

Ví dụ bên trái có sự thay đổi bố cục, còn ví dụ bên phải thì không.

Để cải thiện việc hiển thị phông chữ, một kỹ thuật hiệu quả là hoán đổi phông chữ. Kết xuất một phông chữ hệ thống tải nhanh để hiển thị nội dung trước, sau đó thay thế phông chữ đó bằng một phông chữ web khi phông chữ web tải xong. Điều này mang lại cho bạn cả hai lợi ích: nội dung hiển thị sớm nhất có thể và bạn có được một trang được tạo kiểu đẹp mà không làm mất thời gian của người dùng cho nội dung. Tuy nhiên, vấn đề là đôi khi khi phông chữ trên web tải, nó sẽ dịch chuyển toàn bộ trang vì phông chữ này xuất hiện ở kích thước chiều cao hộp hơi khác.

nhiều nội dung hơn đồng nghĩa với việc có nhiều khả năng xảy ra hiện tượng thay đổi bố cục khi thay thế phông chữ

Bằng cách đặt size-adjust trong quy tắc @font-face, bạn sẽ thiết lập một chế độ điều chỉnh ký tự toàn cục cho kiểu chữ. Nếu chọn đúng thời điểm, bạn sẽ thấy thay đổi tối thiểu về hình ảnh và có thể hoán đổi liền mạch. Để tạo một hiệu ứng chuyển đổi liền mạch, hãy điều chỉnh bằng tay hoặc thử công cụ tính toán điều chỉnh kích thước này của Malte Ubl.

Chọn một Phông chữ web của Google, nhận lại một đoạn mã @font-face đã được điều chỉnh trước.

Khi bắt đầu bài đăng này, việc khắc phục vấn đề về kích thước phông chữ được thực hiện bằng phương pháp thử và sai. size-adjust được điều chỉ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 một cách tự nhiên. Tôi đã căn chỉnh 2 phông chữ theo 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ữ

Bạn, với tư cách là tác giả, sẽ xác định(các) mục tiêu hiệu chuẩn để chuẩn hoá tỷ lệ phông chữ. Bạn có thể chuẩn hoá trên Times, Arial hoặc một phông chữ hệ thống, sau đó điều chỉnh các phông chữ tuỳ chỉnh cho phù hợp. Hoặc bạn có thể điều chỉnh phông chữ cục bộ cho phù hợp với phông chữ bạn tải xuống.

Các 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 cho phù hợp với 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 một phông chữ có sẵn trên máy cho phù hợp với kích thước của một 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, 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ữ Arial cục bộ đang điều chỉnh để dự đoán một phông chữ tuỳ chỉnh đã tải, nhằm mục đích hoán đổi liền mạch.

Chiến lược này có ưu điểm 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à tạo kiểu chữ. Thương hiệu là mục tiêu hiệu chuẩn. Đây là tin vui cho các hệ thống thiết kế.

Việc sử dụng một kiểu 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 Malte. Chọn một Phông chữ của Google và phông chữ đó sẽ tính toán cách điều chỉnh Arial để thay thế liền mạch bằng phông chữ đó. Dưới đây là ví dụ về CSS Roboto từ máy tính, trong đó Arial được tải và đặt tên là "Roboto-fallback":

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

Cảnh báo: Thứ tự của font-family là rất quan trọng. Đây là nơi bạn sắp xếp thứ tự và mức độ ưu tiên. Hãy đảm bảo kiểu chữ bạn muốn nhất nằm ở vị trí đầu tiên. Ngoài ra, local(Arial) có thể không có trên tất cả các thiết bị của người dùng. Do đó, bạn cần cung cấp nhiều phương án dự phòng trong font-family.

Để tạo một chế độ điều chỉnh hoàn toàn đa nền tảng, hãy xem ví dụ sau đây. Ví dụ này cung cấp 2 phông chữ dự phòng cục bộ đã điều chỉnh để dự đoán một 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 tại địa phương

Hãy xem xét đoạn mã sau đây để điều chỉnh một 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ữ đến cho phù hợp.

Tinh chỉnh bằng ascent-override, descent-override và line-gap-override

Nếu việc điều chỉnh tỷ lệ chung của các glyph không đủ cho thiết kế hoặc chiến lược tải của bạn, thì đây là một số lựa chọn tinh chỉnh chi tiết 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

Browser Support

• 87
• 87
• 89
• x

Source

Bộ mô tả ascent-override xác định chiều cao phía trên đường cơ sở của một 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ữ A và O viết hoa, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh để chiều cao chữ viết hoa vừa khít với khung bao tổng thể.

descent-override

Browser Support

• 87
• 87
• 89
• x

Source

Bộ 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%;
}

Tiêu đề màu đỏ (chưa điều chỉnh) có khoảng trống bên dưới đường cơ sở D và O, trong khi 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

Browser Support

• 87
• 87
• 89
• x

Source

Bộ 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 trố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 là ở 0%, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh tăng thêm 50%, tạo khoảng trống phía trên và phía dưới các chữ cái cho phù hợp.

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

Mỗi chế độ ghi đè này cung cấp một cách khác để cắt bớt phần thừa trong 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.

Cảnh báo: Nếu bất kỳ bản minh hoạ nào ở trên không cho thấy sự khác biệt, tức là trình duyệt của bạn không hỗ trợ các chế độ ghi đè.

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 hiện tượ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:

• CSS Fonts Level 5 Spec
• Điều chỉnh kích thước trên MDN
• Trình tạo @font-face chuyển đổi liền mạch
• Đ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ữ: Bộ mô tả phông chữ CSS

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