@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 не волнует, но мобильный будет.