Phông chữ web của Google không tải trong Chrome cho iOS

Question

Khi tôi sử dụng Google Webfonts, chúng tải tốt trên mọi trình duyệt mà tôi quan tâm, NGOẠI TRỪ Chrome/iOS. Điều này có vẻ lạ, vì nó hoạt động tốt trên Chrome dành cho Mac và Safari dành cho iOS, vì vậy tôi không nghĩ đó là sự cố iOS hoặc sự cố Google Chrome. Có vẻ như Chrome dành riêng cho Chrome/iOS.

Bất kỳ ý tưởng hoặc ý tưởng nào về CÁCH khắc phục sự cố này, sẽ tuyệt vời!

Cảm ơn!

EDIT

Tôi đang sử dụng Fonts Google Web được lưu trữ trên Google, như sau:

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" /> 

Trong phông chữ của tôi (Sass), tôi đang sử dụng như sau:

h1 
    font-family: "Leckerli One", cursive 

Answer 1

tôi nhìn thấy cùng một vấn đề. Lưu trữ các tệp phông chữ trên máy chủ của riêng tôi và viết lại các quy tắc @ phông mặt để khớp với vấn đề đã giải quyết cho tôi, cả với máy chủ dev cục bộ của tôi và trong sản phẩm.

Tôi không biết nguyên nhân; dự đoán tốt nhất của tôi sẽ là một số vấn đề cùng xuất xứ được thực thi khác trong UIWebViews (iOS Chrome là UIWebView do quy tắc của App Store).

Answer 2

Trong CSS bạn có thể sử dụng

!important 

Ví dụ:

@font-face { 
    font-family: 'Monda' !important; 
    font-style: normal !important; 
    font-weight: 400 !important; 
    src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important; 
} 

Answer 3

Thiết bị iOS chỉ sử dụng định dạng TTF (hoặc OTF nếu chúng tuân thủ nguyên tắc dành cho nhà phát triển bên dưới). Phông chữ đó đang được phục vụ như WOFF, EOT và OTF (giả sử không tuân theo các hướng dẫn). Có một số services sẽ cung cấp cho bạn các phiên bản khác. Hãy thử chỉ định phông chữ bằng cách sử dụng @ phông mặt và xem điều đó có khắc phục được sự cố không! Fontsquirrel có @font-face generator để thực hiện việc nâng hạng nặng.

Liên quan đến câu hỏi tiếp theo. Có một số tài liệu dành cho nhà phát triển của Apple về việc triển khai Phông chữ TrueType của họ. Nó có thể được tìm thấy here. Về cơ bản, các định dạng TTF lưu trữ phông chữ dưới dạng tài nguyên sfnt. Định dạng phông chữ duy nhất khác có thể làm điều này là trình bao bọc sfnt bảng bù của OpenType. Bởi vì IOS đọc phông chữ bằng cách sử dụng trình bao bọc sfnt, bạn sẽ gặp phải các vấn đề với phông chữ không được lưu trữ theo cách này. (Xin lỗi vì tất cả các cuộc nói chuyện jargonny).

Answer 4

Bạn có thể sử dụng Google Fonts API Loader để phát hiện trình duyệt của người dùng và gửi lại định dạng CSS phù hợp.

Mã mẫu có sẵn trong câu trả lời đầu tiên trên this Stack Overflow question.

Điều này sẽ cho phép cả Safari và Chrome (và các trình duyệt khác dựa trên UIWebView) hiển thị phông chữ chính xác.

Lưu ý: nếu bạn muốn lưu trữ phông chữ cục bộ, như @ Đã đề xuất, this CSS sẽ hoạt động.

Answer 5

Trong trường hợp bất kỳ ai khác vẫn gặp sự cố này - phông chữ không tải trong Chrome trên iOS 9 trở lên - hãy kiểm tra kỹ xem phông chữ có được nhập dưới dạng tệp css hay không dưới dạng tệp js. Phông chữ.com sẽ cung cấp cho bạn tùy chọn nhập phông chữ dưới dạng js, những thứ này sẽ không được chọn trên Chrome/iOS 9 trở xuống. Thay đổi nhập khẩu của tôi để css cố định điều này cho tôi.

Answer 6

Đối với tôi công việc thêm vào trang php:

<style type="text/css"> 
@import url('https://fonts.googleapis.com/css?family=Trocchi'); 
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); 
</style>