@ phông chữ không nhúng trên thiết bị di động Safari (iPhone/iPad)

Question

Tôi đang nhúng phông chữ trên trang web trên thiết bị di động sử dụng @font-face (css từ FontSquirrel). Khi tôi xem trước trong Safari hoặc Chrome trên máy tính để bàn, phông chữ được nhúng tốt, nhưng chúng không xuất hiện trong Safari trên thiết bị di động trên iPhone/iPad. Tôi không nhận được bất kỳ lỗi nào và tôi không thể tìm ra những gì đang xảy ra. Đây là CSS của tôi. Bất kỳ ý tưởng?

@font-face { 
    font-family: 'JottingRegular'; 
    src: url('../fonts/jotting_regular-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/jotting_regular-webfont.woff') format('woff'), 
     url('../fonts/jotting_regular-webfont.ttf') format('truetype'), 
     url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'JottingBold'; 
    src: url('../fonts/jotting_bold-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/jotting_bold-webfont.woff') format('woff'), 
     url('../fonts/jotting_bold-webfont.ttf') format('truetype'), 
     url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

Khuôn mặt phông chữ không được hỗ trợ trên MobileSafari cho đến iOS 4.2.

Answer 2

OK, tôi đã tìm ra và sẽ ghi lại tài liệu cho bất kỳ ai có vấn đề này trong tương lai. Tôi đã sao chép CSS từ Font Squirrel và sau đó tôi đã cần phải tải xuống lại các tệp phông chữ thực tế sau này. Tôi không nghĩ rằng sẽ thay đổi bất cứ điều gì trong CSS, nhưng nó chỉ ra rằng phông chữ SVG (được sử dụng bởi safari di động) tất cả đều có một ID được tham chiếu trong tập tin phông chữ và CSS.

Vì vậy, trong:

url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg') 

webfonttEfFltbI là id phông chữ. Tôi mở tập tin phông chữ SVG trong một trình soạn thảo văn bản và tìm thấy ID mới trong dòng sau gần phía trên cùng của file:

<font id="webfontC6xdxB57" horiz-adv-x="972" > 

Thay id sau thẻ băm trong CSS cố định vấn đề.

Answer 3

này đã được giải quyết, nhưng tôi đã có một vấn đề tương tự ở đây:

@font-face not working in mobile Webkit

Đối với tôi, tất cả các ID trên các phông chữ SVG là chính xác; đó là cú pháp FontSquirrel đã được chiến thắng. Sử dụng cú pháp chống đạn FontSpring được cập nhật đã khắc phục sự cố cho tôi và dường như hoạt động hoàn toàn với trình duyệt chéo.

Answer 4

Phông chữ hoạt động trên safari di động, tôi đang sử dụng trên iPhone 3. Tôi cũng đã sao chép mã từ phông chữ nhưng không hoạt động. Đây là mã được cập nhật. Sử dụng nó và nó sẽ hoạt động ở mọi nơi.

@font-face { 
    font-family: 'MyriadProBoldCondensed'; 
    src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'), 
     url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'), 
     url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'), 
     url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 5

Tôi cũng gặp tình huống tương tự. Tôi đã giải quyết nó bằng cách cập nhật đường dẫn đến phông chữ. Mặc dù Chrome & Safari được tải chúng tốt, iOS đã không nhận ra con đường của tôi mà là

url ('font/chunkfive/font.eot') 

tôi đã thay đổi dòng đó bao gồm một / đến đầu của con đường phông chữ và rằng mọi thứ đều cố định.

url ('/font/chunkfive/font.eot') 

Bạn cũng có thể thử sử dụng đường dẫn tuyệt đối.

Answer 6

Tôi đã làm việc với điều này trong một giờ trước khi nhận ra sai lầm ngu ngốc của tôi.

Safari trên thiết bị di động là trường hợp nhạy cảm đối với phông chữ, trong khi Desktop Safari thì không.

Nếu phông chữ của bạn có tiêu đề: font.svg, bạn phải thêm chính xác như vậy. Nếu bạn thêm nó với một F vốn, Desktop Safari sẽ không quan tâm, nhưng di động sẽ.