Đ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 mã minh hoạ sau đây, trong đó font-size là một 64px nhất quán và sự khác biệt duy nhất giữa các 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 thị chiều cao.

Bài đăng này khám phá một trình mô tả phông chữ CSS mới 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).

Hỗ trợ trình duyệt

• 92
• 92
• 92
• 17

Nguồn

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 chuyển đổi 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ẽ nhảy xung quanh!).

Thuật ngữ chính: Bộ phông chữ so với Phông chữ: typeface được gọi theo tên bộ phông chữ cộng với kiểu chữ. Helvetica Bold đề cập đến phông chữ đậm cụ thể, còn Helvetica đề cập chung đến toàn bộ bộ phông chữ gồm 8 phông chữ trở lên (bình thường, đậm, nghiêng, v.v.). Với CSS @font-face, bạn sẽ xử lý phông chữ, mặc dù để sử dụng các phông chữ này, 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 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";
}

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

Giảm thiểu CLS bằng cách 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.

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

Để cải thiện khả năng kết xuất phông chữ, một kỹ thuật hiệu quả là hoán đổi phông chữ. Trước tiên, hãy kết xuất phông chữ hệ thống tải nhanh để hiển thị nội dung, 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 lại cho bạn những lợi ích tốt nhất của cả hai phương pháp: 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ắt mà không làm mất thời gian của người dùng để xem nội dung. Tuy nhiên, vấn đề là đôi khi khi phông chữ web tải, toàn bộ trang sẽ bị dịch chuyển do phông chữ hiển thị ở kích thước chiều cao hộp hơi khác.

nội dung càng nhiều thì càng có nhiều khả năng thay đổi bố cục khi hoán đổi phông chữ

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 quá trình hoán đổi liền mạch, hãy điều chỉnh theo cách thủ công hoặc thử máy tính đ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, lấy lại đoạn mã @font-face đã điều chỉnh trước.

Ở đầ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 đẩy vào 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 một cách 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');
}

Hiệu chỉnh phông chữ

Bạn (với tư cách là tác giả) 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 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ữ cục bộ 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:

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 để 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ó ư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à 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ề 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 thứ tự và mức độ ưu tiên được đặt. Hãy đảm bảo phông chữ bạn muốn nhất nằm ở vị trí đầu tiên. Hơn nữa, local(Arial) có thể không có trên tất cả thiết bị của người dùng, vì vậy, điều quan trọng là bạn phải cung cấp nhiều phương án dự phòng trong phông chữ.

Để 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 cục bộ

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 để khớp.

Tinh 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ệ phông chữ chung không đủ cho 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 điều chỉnh chi tiết 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

Hỗ trợ trình duyệt

• 87
• 87
• 89
• x

Nguồn

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

Hỗ trợ trình duyệt

• 87
• 87
• 89
• x

Nguồn

Chỉ số 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 vặn trên dòng cơ sở.

line-gap-override

Hỗ trợ trình duyệt

• 87
• 87
• 89
• x

Nguồn

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 là ở 0%, trong khi dòng tiêu đề màu xanh dương đã được điều chỉnh tăng 50%, tạo 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 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.

Cảnh báo: Nếu bất kỳ bản minh hoạ nào ở trên không hiển thị sự khác biệt, thì 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ữ, 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 về phông chữ CSS cấp 5
• Điều chỉnh kích thước trên MDN
• Trình tạo @font-face hoá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ữ: Chỉ số mô tả phông chữ CSS

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