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

Khi 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á 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à 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 dạng lưới CSS của Chrome DevTools được dùng để hiển thị chiều cao.

Bài đăng này khám phá một bộ mô tả phông chữ CSS mới có tên là size-adjust. Bài viết này cũng trình bày một số cách để điều chỉnh và chuẩn hoá cỡ 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á việc kết xuất phông chữ 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à bản minh hoạ tương tác về phạm vi của 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 gây khó chịu 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 Kiểu chữ: Kiểu chữ được gọi bằng tên bộ phông chữ cộng với kiểu phông chữ. Helvetica Bold đề cập đến kiểu chữ đậm cụ thể, còn Helvetica đề cập chung đến toàn bộ bộ phông chữ 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 chúng, 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ệ của mỗi ký tự lên 150% so với 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 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à cách bố cục 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ó sự 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ữ. Hiển thị phông chữ hệ thống tải nhanh để hiện nội dung trước, sau đó hoán đổi phông chữ đó bằng 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ắ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 phông chữ web tải, nó sẽ dịch chuyển toàn bộ trang vì nó hiển thị ở kích thước chiều cao hộp hơi khác.

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

Bằng cách đặt size-adjust vào quy tắc @font-face, quy tắc này sẽ đặt mức điều chỉnh ký tự chung cho kiểu phông chữ. Việc căn thời gian phù hợp sẽ giúp giảm thiểu thay đổi về hình ảnh, giúp quá trình hoán đổi diễn ra liền mạch. Để tạo một hoán đổi liền mạch, hãy điều chỉnh bằng tay 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, nhận lại một đoạn mã @font-face đã điều chỉnh trước.

Ở phần đầu của bài đăng này, việc khắc phục vấn đề về cỡ chữ được thực hiện bằng cách 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 đã 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');
}

Đang hiệu chỉnh phông chữ

Bạn là tác giả 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á phông chữ Times, Arial 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ữ 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. Nhắm mục tiêu theo địa phương:
   Điều chỉnh phông chữ đã tải xuống theo phông chữ mục tiêu theo địa phương.

Ví dụ 1: Mục tiêu từ xa

Hãy xem xét đoạn mã sau đây, trong đó điều chỉnh phông chữ có sẵn trên thiết 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 chỉnh, có thể là phông chữ của 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 để chuẩn bị cho phông chữ tuỳ chỉnh được 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ữ để đị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ế.

Máy tính của Malte cũng hoạt động theo cách lấy kiểu chữ thương hiệu làm mục tiêu. Chọn một Google Fonts và phông chữ 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 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. 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, do đó, bạn cần cung cấp nhiều phương án dự phòng trong bộ phông chữ.

Để tạo một mức điều chỉnh hoàn toàn đa nền tạp, 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ự phòng cho 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: Nhắm mục tiêu theo đị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 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ự chưa đủ cho thiết kế hoặc chiến lược tải của bạn, thì dưới đây là một số lựa 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

Browser Support

• 87
• 87
• 89
• 

Source

Phần 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ữ 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 chữ hoa vừa khít với hộp giới hạn tổng thể.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

Phần 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 được đề xuất cho phông chữ hoặc khoảng cách dòng bên ngoài.

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

Tiêu đề màu đỏ (chưa điều chỉnh) không có line-gap-override, về cơ bản là ở mức 0%, trong khi tiêu đề màu xanh dương đã được điều chỉnh tăng 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ớ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 cho thấy sự khác biệt, thì 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 sự 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 của CSS Fonts Level 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
• Mức thay đổi bố cục tích luỹ (CLS) trên web.dev
• 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