Các font-systhesisbất động sản trong CSS cho các hướng dẫn trình duyệt cho cách xử lý nhân vật chữ in đậm và in nghiêng khi quy định font-familykhông bao gồm chúng.
Hãy lấy Lato từ Google Fonts làm ví dụ. Nó cho biết có 10 biến thể khác nhau của phông chữ.
Mỗi biến thể phông chữ đó về mặt kỹ thuật là một tệp phông chữ khác nhau. Nếu chúng tôi muốn sử dụng một số trọng lượng và kiểu dáng nhất định, thì chúng tôi sẽ liên kết các tệp đó lại để trình duyệt có thứ gì đó để tải.
Tuy nhiên, không phải tất cả các phông chữ đều bao gồm các tệp để xử lý trọng lượng và kiểu dáng. Trong những trường hợp đó, trình duyệt sẽ tự "tổng hợp" diện mạo. Trình duyệt làm tốt nhất có thể, nhưng kiểu in đậm và giả tạo đôi khi khiến văn bản trở nên khó đọc hơn; nghĩa là, ít dễ đọc hơn một phiên bản được thiết kế thực sự. Trong trường hợp nhẹ nhất, chúng ta có thể thấy các ký tự chồng chéo lên nhau. Trong những trường hợp nghiêm trọng hơn, văn bản hoàn toàn không thể đọc được hoặc thậm chí có thể thay đổi ý nghĩa - như có thể xảy ra với các ngôn ngữ như tiếng Trung, tiếng Nhật, tiếng Hàn và các tập lệnh logographic khác.
Đó là nơi font-synthesisxuất hiện. Nó kiểm soát những kiểu chữ nào mà trình duyệt được phép tổng hợp.
Cú pháp
.element ( font-synthesis: none | ( weight || style ); )Trong tiếng Anh đơn giản, nghĩa font-synthesisnày sẽ chấp nhận:
- một giá trị của
none - một trong hai
weighthoặcstyle - cả hai
weightvàstyle
Cần lưu ý rằng nó font-synthesisđược coi là thuộc tính tốc ký. Theo thông số kỹ thuật, đó là sự kết hợp của font-synthesis-weightvà font-synthesis-stylenơi cả hai đều chấp nhận các giá trị của autohoặc none. Vì có thể đạt được hiệu quả tương tự bằng cách sử dụng tốc ký, đó có lẽ là cách tốt nhất.
Giá trị
none: Không thể tổng hợp đậm và xiênweight: In đậm có thể được trình duyệt tổng hợpstyle: Xiên có thể được tổng hợp bởi trình duyệt
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */Sử dụng
font-synthesiscó thể được sử dụng với tất cả các yếu tố, bao gồm ::first-lettervà ::first-linepseudo-yếu tố.
Có thể có những trường hợp không cho phép trình duyệt tổng hợp chữ đậm và nét xiên trên toàn bộ một ngôn ngữ có ý nghĩa vì một trong hai ngôn ngữ có thể che khuất các ký tự. Dưới đây là một ví dụ được lấy từ thông số kỹ thuật vô hiệu hóa các mặt phông chữ đậm và xiên tổng hợp có chứa các ký tự Ả Rập:
/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )Bản giới thiệu
Hỗ trợ trình duyệt
Tại thời điểm viết bài, caniuse báo cáo mức độ phủ sóng toàn cầu là 20,21% cho font-synthesistài sản.
Máy tính để bàn
| I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Không | Không | 34+ | Không | 9+ | Không |
Di động
| iOS Safari | Opera Mini | Trình duyệt Android | Chrome dành cho Android | Firefox dành cho Android |
|---|---|---|---|---|
| 9+ | Tất cả | Không | Không | 68 |
Bạn muốn sử dụng font-synthesistrong email? Campaign Monitor báo cáo rằng nó được hỗ trợ bởi các khách hàng sau:
- Apple Mail 10+
- Outlook dành cho Mac
- Ứng dụng AOL Alto iOS
- Thư iOS 10+
- Chim sẻ
- G Suite
- Gmail
- Hộp thư đến của Google
Thêm thông tin
- Đặc điểm kỹ thuật mô-đun Phông chữ CSS cấp 4
- “Kiểm tra CSS3:
font-synthesis“ bởi Eric Meyer - “Cách in nghiêng văn bản” của Chris Coyier