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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

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