CSS: Tắt chữ ghép phông chữ trong tất cả các trình duyệt

Question

Vì phông chữ google bị chặn ở Trung Quốc, tôi phải tải xuống và sử dụng FontSquirrel để chuyển đổi.

Vấn đề: fi/ff/etc là xấu xí

tôi đã làm tất cả các bước ở đây Prevent ligatures in Safari (Mavericks/iOS7) via CSS nhưng không có điếu xì gà.

Làm cách nào để vô hiệu hóa các chữ ghép cùng một lúc? -webkit-font-variant-ligatures: no-common-ligatures; Không làm việc

Answer 1

Mặc dù no-common-ligatures bạn có thể thử các giá trị như none, unset hoặc no-contextual. See MDN cho tất cả các giá trị có thể có.

Ngoài ra nó should be supported trong tất cả các trình duyệt hiện đại.

Answer 2

Về cơ bản các câu trả lời tương tự mà andreas cung cấp, nhưng đây là CSS đầy đủ để dễ tham khảo:

* { 
 
font-variant-ligatures: none; 
 
}

Answer 3

1. Bạn có thể xóa bỏ dòng trong CSS của bạn như:

   @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); 
   

2. Sau đó, mở URL từ phía trên trong trình duyệt, bạn sẽ nhận được tệp CSS như sau:

   /* latin */ 
   @font-face { 
       font-family: 'Source Sans Pro'; 
       font-style: italic; 
       font-weight: 300; 
       src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/fpTVHK8qsXbIeTHTrnQH6MAjkyiewWYrWZc50I8hK7I.woff2) format('woff2'); 
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; 
   } 
   

3. Tải xuống từng phông chữ được cung cấp trong URL của mỗi khối và đặt vào nội dung của bạn.

4. Lưu CSS trong nội dung của bạn (giả sử google-fonts.css) sau khi sửa đổi URL (liên quan đến thư mục nội dung của bạn).

Bây giờ, ứng dụng của bạn sẽ sử dụng phông chữ google có cùng nguồn gốc và bạn sẽ không cảm thấy bất kỳ sự khác biệt nào.