Trang này được dịch bởi Cloud Translation API.

Đ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ông cụ gỡ lỗi bố cục lưới CSS của Chrome cho nhà phát triển được sử dụng để hiển thị độ cao.

Bài đăng này khám phá kiểu phông chữ CSS mới mã mô tả được gọi 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ữ để 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á quá trình kết xuất phông chữ trên web để ngăn mức thay đổi bố cục tích luỹ (CLS).

Hỗ trợ trình duyệt

Nguồn

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

Sự khác biệt về chiều cao trong kết quả.
Thay đổi nội dung gây khó chịu về mặt hình ảnh.
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!).

Từ khoá chính: Bộ phông chữ và Kiểu chữ: Kiểu chữ được gọi theo 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ý các kiểu chữ, mặc dù để sử dụng các kiểu 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');
}

Tạo kiểu chữ tuỳ chỉnh có tên là Adjusted Typeface.
Sử dụng size-adjust để tăng tỷ lệ từng 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";
}

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ó tuỳ chọn thay đổi bố cục, 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ữ. Kết xuất tải nhanh phông chữ hệ thống để hiển thị nội dung trước, sau đó hoán đổi với phông chữ trên web khi phông chữ trên web sẽ tải xong. Điều này mang đến cho bạn lợi ích tốt nhất của cả hai thế giới: hiển thị càng sớm càng tốt và bạn sẽ có được một 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 khi phông chữ trên web tải, nó làm thay đổi toàn bộ trang vì phông chữ hiển thị ở kích thước chiều cao của hộp khác một chút.

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, thao tác này sẽ đặt một ký tự toàn cục điều chỉnh kiểu phông chữ. Việc căn thời gian đúng này sẽ khiến thị giác của bạn giảm đi hoán đổi liền mạch. Để tạo hoán đổi liền mạch, hãy điều chỉnh thủ công hoặc thử tính năng này điều chỉnh kích thước máy tính của Malte Ubl.

Chọn một Phông chữ web của Google, lấy lại đoạn mã @font-face được đ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 kích thước phông 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 chỉnh để chuẩn hoá phông chữ quy mô. Bạn có thể chuẩn hoá phông chữ phông chữ Times, trắng hoặc một phông chữ hệ thống, sau đó điều chỉnh phông chữ 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 nội dung bạn tải xuống.

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

Nhắm 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.
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 giúp điều chỉnh phông chữ có sẵn trên thiết bị theo kích thước khớ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, 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ộ WebP sẽ điều chỉnh theo dự đoán của phông chữ tuỳ chỉnh được tải, đối vớ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ỡ chữ và kiểu chữ. Thương hiệu là mục tiêu tiêu chuẩn. Đâ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 phông chữ của Google và Google Font sẽ tính toán cách điều chỉnh phông chữ sao cho liền mạch hoán đổi với thiết bị đó. 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 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 địa phương

Hãy xem xét đoạn mã sau đây giúp đ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 chỉnh sửa cho phù hợp với phông chữ phù hợp với phông chữ quan trọng của phông chữ này.

@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 bất kỳ sự điều chỉnh nào, sau đó điều chỉnh mọi phông chữ sắp tới cho phù hợ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. Chiến lược phát hành đĩa đơn ascent-override! descent-override! và line-gap-override các thuộc tính hiện được triển khai trong Chromium 87 trở lên và Firefox 89 trở lên.

kéo ở trên và thổi phần ghi đè từ, thể hiện các khu vực mà
các tính năng có thể cắt bớt

`ascent-override`

Hỗ trợ trình duyệt

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

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 khít trên dòng cơ sở.

`line-gap-override`

Hỗ trợ trình duyệt

Nguồn

Phần mô tả line-gap-override xác định chỉ số về 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à bên dưới các chữ cái tương ứng.

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

Mỗi quy tắc ghi đè này cung cấp thêm một cách để cắt bỏ phần thừa khỏi trang web hộp giới hạn văn bản an toàn. 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 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:

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

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

Cách điều chỉnh tỷ lệ phông chữ bằng size-adjust

Giảm thiểu CLS bằng cách hoán đổi phông chữ liền mạch

Hiệu chỉnh phông chữ

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

Ví dụ 2: Mục tiêu địa phương

Tinh chỉnh chi tiết hơn bằng ascent-override, descent-override và line-gap-override

ascent-override

descent-override

line-gap-override

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

Kết luận

Cách điều chỉnh tỷ lệ phông chữ bằng `size-adjust`

Tinh chỉnh chi tiết hơn bằng `ascent-override`, `descent-override` và `line-gap-override`

`ascent-override`

`descent-override`

`line-gap-override`