@ font-face не встраивается в мобильный Safari (iPhone / iPad) - PullRequest
Новая
       23

@ font-face не встраивается в мобильный Safari (iPhone / iPad)

15 голосов
/ 10 декабря 2010

Я встраиваю шрифты на мобильный сайт, используя @font-face (css от FontSquirrel). При предварительном просмотре в настольном Safari или Chrome шрифты встраиваются нормально, но они не отображаются в мобильном Safari на iPhone / iPad. Я не получаю никаких ошибок, и я не могу понять, что происходит не так. Вот мой CSS. Есть идеи? 

@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;
}

Ответы [ 6 ]

22 голосов
/ 10 декабря 2010

ОК, я разобрался с этим и запишу документ для всех, кто столкнется с этой проблемой в будущем.Я скопировал CSS из Font Squirrel, а затем мне нужно было повторно загрузить настоящие файлы шрифтов позже.Я не думал, что это что-то изменит в CSS, но оказывается, что все шрифты SVG (которые используются мобильным сафари) имеют идентификатор, на который ссылаются в файле шрифта и CSS.

Итак, в: 

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

webfonttEfFltbI - это идентификатор шрифта.Я открыл файл шрифта SVG в текстовом редакторе и нашел новый идентификатор в следующей строке в верхней части файла: 

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

Замена идентификатора после хэш-тега в CSS исправила проблему.1009 *

2 голосов
/ 20 сентября 2012

У меня была такая же ситуация. Я решил это, обновив пути к шрифту. Несмотря на то, что Chrome и Safari загружали их нормально, iOS не распознала мой путь, который был 

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

Я изменил эту строку, чтобы включить / в начало пути шрифта, и это все исправило. 

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

Вы также можете попробовать использовать абсолютный путь.

1 голос
/ 06 августа 2016

Я работал с этим в течение часа, прежде чем осознал свою глупую ошибку.

Мобильное Safari является CASE SENSITIVE для шрифтов, а Desktop Safari - нет.

Если ваш шрифт называется: font.svg, вы должны добавить его в точности так, как оно есть. Если вы добавите его с заглавной буквой F, Desktop Safari не будет заботиться о нем, а о мобильной -. 1006 *

1 голос
/ 10 декабря 2010

Лицо шрифта не поддерживается в MobileSafari до iOS 4.2.

0 голосов
/ 02 марта 2012

Font face работает на мобильном сафари, я использую на iphone 3. Я также скопировал код из шрифта squirl, но он не работал. Вот обновленный код. Используйте это, и оно будет работать везде. 

@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;
}
0 голосов
/ 05 февраля 2011

Это уже решено, но у меня была похожая проблема:

@ font-face не работает в мобильном Webkit

Для меня все идентификаторы на SVG-шрифтах были правильными;это был синтаксис FontSquirrel, который был вялым.Использование обновленного пуленепробиваемого синтаксиса FontSpring устранило проблему для меня и, похоже, работает полностью кросс-браузерно.

...