it-roy-ru.com

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

Я встраиваю шрифты на мобильный сайт, используя @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;
}
15
pixielex

Хорошо, я понял это и запишу для любого, у кого есть эта проблема в будущем. Я скопировал 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 исправила проблему.

22
pixielex

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

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

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

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

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

2
Matt B

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

1
Mike

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

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

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

0
gkrizek

Лицо шрифта работает на мобильном сафари, я использую на 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
Sachin Gadia

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

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

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

0
bigsweater