Catalina mang phông chữ hệ thống có thể thay đổi thống nhất mới cho macOS.
Phần "system-ui" của thông số kỹ thuật Mô-đun phông chữ CSS cấp 4 xác định từ khoá phông chữ system-ui cho phép nhà phát triển sử dụng phông chữ hệ điều hành mặc định tích hợp sẵn, được tối ưu hoá cho turbo, được bản địa hoá, chất lượng cao, không cần tải xuống, ngay trong trang web và ứng dụng của họ.
body {
font-family: system-ui;
}
Lựa chọn kiểu chữ này gần giống với cách nói "sử dụng phông chữ hệ thống mặc định cho ngôn ngữ hiện tại của người dùng này".
Trên macOS, phông chữ system-ui là San Francisco, phông chữ mà nhóm thiết kế đã xem xét kỹ lưỡng, thử nghiệm và... gần đây đã nâng cấp! Trước tiên, chúng ta sẽ tìm hiểu về các tính năng mới thú vị về phông chữ trong Catalina. Sau đó, chúng ta sẽ tìm hiểu một số lỗi và cách các kỹ sư Chromium giải quyết các lỗi đó.
Bài đăng này giả định rằng bạn đã quen thuộc với phông chữ biến đổi. Nếu chưa, hãy xem bài viết Giới thiệu về các phông chữ có thể thay đổi trên web và video bên dưới.
Khả năng tương thích với trình duyệt
Tại thời điểm viết bài, system-ui được hỗ trợ trên Chromium (kể từ phiên bản 56), Edge (kể từ phiên bản 79), Safari (kể từ phiên bản 11) và từ Firefox (kể từ phiên bản 43) nhưng với từ khoá -apple-system. Hãy xem mục Tôi có thể sử dụng phông chữ thay đổi không? để biết thông tin cập nhật.
Sức mạnh mới
Các tính năng mới mà Catalina mang đến cho phông chữ hệ thống hiện có sẵn cho các nhà phát triển web kể từ Chromium 83. Phông chữ system-ui hiện có nhiều chế độ cài đặt khác nhau: kích thước quang học và 2 mức điều chỉnh trọng lượng riêng biệt:
h1 {
font-family: system-ui;
font-weight: 700;
font-variation-settings:
'wght' 750
;
}
h1 {
font-family: system-ui;
font-weight: 700;
font-variation-settings:
'wght' 750,
'opsz' 20,
'GRAD' 400,
'YAXS' 400
;
}
Trên Mojave, system-ui là một phông chữ có thể thay đổi chỉ có các chế độ cài đặt wght. Trong khi system-ui trên Catalina là một phông chữ biến đổi có các chế độ cài đặt wght, opsz, GRAD và YAXS.
Có vẻ như tôi đã có một số cơ hội thiết kế nâng cao dần dần! Bạn nên thực sự đào sâu vào sự tinh tế của phông chữ hệ thống nếu muốn.
wght
Chấp nhận độ đậm phông chữ từ 0 đến 900 và được áp dụng đồng đều cho tất cả các ký tự.
/* 0-900 */
font-variation-settings: 'wght' 750;
opsz
Kích thước quang học tương tự như giãn cách hoặc giãn cách chữ, nhưng khoảng cách này là do mắt người thực hiện thay vì bằng toán học. Giá trị 19 hoặc thấp hơn là dành cho khoảng cách giữa văn bản và nội dung, còn 20 trở lên là dành cho khoảng cách tiêu đề và tiêu đề hiển thị.
/* 19 or 20 */
font-variation-settings: 'opsz' 20;
GRAD
Tương tự như trọng lượng, nhưng không chạm vào khoảng cách theo chiều ngang. Phương thức này chấp nhận các giá trị từ 400 đến 1000.
/* 400-1000 */
font-variation-settings: 'GRAD' 500;
YAXS
Kéo giãn ký tự theo chiều dọc. Phương thức này chấp nhận các giá trị từ 400 đến 1000.
/* 400-1000 */
font-variation-settings: 'YAXS' 500;
Kết hợp các lựa chọn
Với một vài dòng CSS, chúng ta có thể chỉnh sửa các cài đặt phông chữ thành chữ in đậm theo lựa chọn của chúng tôi hoặc thử những cách kết hợp thú vị khác:
font-weight: 700;
font-weight: bold;
font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;
Như vậy, người dùng Chromium trên macOS sẽ thấy trọng lượng 750 tuỳ chỉnh đã nâng cấp của bạn cùng một số tính năng thú vị khác 👍
Sân chơi
Nhấp vào Remix để chỉnh sửa trong hiệu ứng Nhiễu bên dưới để tải bản sao có thể chỉnh sửa của Nhiễu sọc, sau đó chỉnh sửa các tuỳ chọn font-variation-settings mới để xem ảnh hưởng của hiệu ứng này đến phông chữ của bạn. Hãy nhớ rằng Nhiễu này sẽ chỉ hoạt động nếu bạn đang sử dụng thiết bị macOS Catalina.
macOS 10.15 đã thêm các tính năng mới vào phông chữ hệ thống của mình, và trong macOS 10.15, một lỗi system-ui phức tạp đã được ghi lại trong trình theo dõi lỗi Chromium. Không biết chúng có liên quan với nhau không!?
Phụ lục: Hồi quy system-ui
Câu chuyện này bắt đầu bằng một lỗi khác: #1005969. Vấn đề này được báo cáo dựa trên macOS 10.15 vì khoảng cách phông chữ system-ui trông hẹp và bị nhồi nhét.
Thông tin khái quát
Bạn có bao giờ thấy trên macOS 10.14 cách các đoạn văn hoặc tiêu đề của bạn "bám" với một phông chữ trông khác khi tăng hoặc giảm kích thước không?
Trên Mojave (macOS 10.14), phông chữ system-ui chuyển đổi giữa hai phông chữ tùy thuộc vào kích thước phông chữ mục tiêu. Khi văn bản dưới 20px, macOS sử dụng "Văn bản San Francisco". Khi văn bản có kích thước từ 20px trở lên, macOS sử dụng "Màn hình San Francisco". Kích thước quang học được đặt cố định thành hai phông chữ riêng biệt.
Catalina (macOS 10.15) đã cung cấp phông chữ biến đổi hợp nhất mới cho San Francisco. Bạn không còn phải quản lý "Văn bản" và "Hiển thị" nữa. Biến thể này cũng đã nhận được chế độ cài đặt biến thể mới opsz mà chúng tôi mô tả trước đó.
h1 {
font-variation-settings: 'opsz' 20;
}
Thật không may, giá trị opsz mặc định trong phông chữ Catalina mới là 20 và các kỹ sư Chromium chưa sẵn sàng áp dụng opsz cho phông chữ hệ thống. Điều này dẫn đến việc các kích thước nhỏ hơn hiển thị quá hẹp.
Để khắc phục vấn đề này, Chromium cần áp dụng đúng opsz cho phông chữ hệ thống. Điều này đã dẫn đến việc khắc phục Vấn đề #1005969. Chiến thắng! Hay là...?
Chưa xong
Đây là vấn đề phức tạp: Chromium đã áp dụng opsz nhưng có gì đó chưa ổn. Phông chữ hệ thống trên máy Mac có thêm một bảng phông chữ tên là trak, giúp điều chỉnh khoảng cách theo chiều ngang. Trong quá trình tìm cách khắc phục, các kỹ sư Chromium nhận thấy rằng trên macOS, khi truy xuất các chỉ số ngang từ một đối tượng CTFontRef, các chỉ số trak đã được đưa vào kết quả chỉ số. Thư viện tạo hình của Chromium HarfBuzz cần có các chỉ số trong đó giá trị trak chưa được đưa vào.
Trong nội bộ, Skia (thư viện đồ hoạ, không phải kiểu chữ của cùng tên) sử dụng cả lớp CGFontRef của CoreGraphics và lớp CTFontRef trong CoreText. Do cần phải chuyển đổi nội bộ giữa các đối tượng đó (dùng để duy trì khả năng tương thích ngược và truy cập vào các API cần thiết trên cả hai lớp), Skia sẽ giảm được trọng số thông tin trong một số trường hợp nhất định và phông chữ đậm sẽ ngừng hoạt động. Thông tin này đã được theo dõi trong Vấn đề #1057654.
Skia vẫn cần hỗ trợ macOS 10.11 vì Chromium vẫn hỗ trợ. Vào ngày 10.11, phông chữ "Văn bản San Francisco" và "Hiển thị San Francisco" thậm chí không còn là các phông chữ biến đổi. Thay vào đó, mỗi phông chữ là một bộ phông chữ riêng cho từng độ đậm có sẵn. Tại một số thời điểm, mã nhận dạng ký tự của họ không đồng bộ với nhau. Vì vậy, nếu Skia đã tạo hình dạng văn bản (chuyển đổi văn bản thành ký tự có thể vẽ được) bằng "Văn bản San Francisco", thì văn bản đó sẽ bị vô nghĩa nếu được vẽ bằng "Hiển thị San Francisco" và ngược lại. Ngay cả khi Skia chỉ yêu cầu kích thước khác, macOS có thể chuyển sang kích thước khác. Có thể luôn sử dụng một trong các phông chữ và chỉ điều chỉnh tỷ lệ (sử dụng ma trận để tăng tỷ lệ thay vì yêu cầu kích thước lớn hơn). Tuy nhiên, CoreText có một vấn đề là không điều chỉnh được sbix (biểu tượng cảm xúc màu) glyphs lên (chỉ giảm). Cách này phức tạp hơn một chút. Thực ra, CoreText có vẻ như giới hạn phạm vi theo chiều dọc sau khi áp dụng ma trận, vì điều này có vẻ như liên quan đến việc không thể vẽ biểu tượng cảm xúc ở góc 45 độ. Trong mọi trường hợp, nếu muốn biểu tượng cảm xúc của mình xuất hiện to, bạn cần tạo một bản sao phông chữ để có phiên bản lớn hơn.
Vì vậy, để tạo bản sao của các đối tượng CTFont có kích thước khác nhau trong nội bộ mà vẫn đảm bảo rằng dữ liệu phông chữ cơ bản được sử dụng, Chromium đã kéo CGFont ra khỏi CTFont, sau đó tạo một CTFont mới từ CGFont (các đối tượng CGFont không phụ thuộc vào kích thước, quá trình chuyển đổi kỳ diệu diễn ra ở cấp CoreText). Điều này hoạt động tốt cho đến ngày 10.154. Vào 10:15, chuyến đi khứ hồi này đã mất quá nhiều thông tin, dẫn đến vấn đề về cân nặng. Flutter nhận thấy vấn đề về trọng lượng và một bản sửa lỗi thay thế cho việc đổi kích thước đã được thực hiện để tạo CTFont mới ngay từ CTFont ban đầu, đồng thời trực tiếp điều khiển kích thước quang học bằng một thuộc tính cũ nhưng không được ghi lại trong CoreText. Điều này giúp mọi thứ hoạt động trên 10.11 và khắc phục các vấn đề khác (như đặt kích thước quang học thành giá trị mặc định một cách rõ ràng).
Tuy nhiên, cách này giúp giữ lại nhiều "ma thuật" CoreText trong phông chữ. Một trong những cách này có vẻ như vẫn điều chỉnh các tiến bộ về ký tự theo một cách nào đó ngoài bảng trak (ứng dụng mà Chromium đã cố gắng loại bỏ thông qua một thuộc tính không được ghi nhận khác).
CGFont không thực hiện bất kỳ 'phép màu' nào trong số này vì vậy có lẽ Chromium có thể loại bỏ CGFont khỏi CTFont và chỉ sử dụng nó để nâng cao? Rất tiếc, cách này không hiệu quả vì CoreText cũng kết hợp phông chữ theo những cách khác. Ví dụ: sẽ làm cho các biểu tượng cảm xúc nhỏ lớn hơn một chút so với yêu cầu thực tế của bạn (tăng kích thước một chút). CGFont không biết về điều này, vì vậy bạn sẽ để các biểu tượng cảm xúc dựa trên sbix của mình ở quá gần nhau vì bạn đo bằng một kích thước nhưng CoreText sẽ vẽ các biểu tượng này lớn hơn một chút. Chromium muốn CTFont tiến bộ, nhưng nó muốn chúng mà không cần theo dõi và tốt nhất là không cần bất kỳ sự can thiệp nào khác.
Vì để khắc phục vấn đề về dấu cách cần đến một tập hợp các bản sửa lỗi Blink và Skia kết nối với nhau, các kỹ sư của Chromium không thể "hoàn nguyên" để khắc phục vấn đề này. Các kỹ sư Chromium cũng đã thử sử dụng một cờ bản dựng khác để thay đổi đường dẫn mã liên quan đến phông chữ trong Skia. Thao tác này đã khắc phục sự cố phông chữ đậm nhưng đã hồi quy vấn đề về dấu cách.
Cách khắc phục
Cuối cùng, tất nhiên Chromium muốn khắc phục cả hai vấn đề. Chromium hiện sử dụng các hàm chỉ số phông chữ OpenType phông chữ tích hợp của Harf Buzz để truy xuất các chỉ số ngang trực tiếp qua dữ liệu nhị phân trong bảng phông chữ của hệ thống. Sử dụng tính năng này, Chromium sẽ thay đổi CoreText và Skia khi phông chữ có bảng trak (trừ phi đó là phông chữ của biểu tượng cảm xúc).
Trong thời gian chờ đợi, vẫn còn Vấn đề #10123 của Skia cần theo dõi việc khắc phục vấn đề này hoàn toàn trong Skia. Sau đó, hãy quay lại sử dụng Skia để truy xuất các chỉ số phông chữ hệ thống từ đó, thay vì bản sửa lỗi hiện tại được khắc phục vào HarfBuzz.