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

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

14 голосов
/ 01 февраля 2011

Мне трудно заставить @font-face вести себя в любом мобильном браузере, который я тестировал - Safari на iPhone 3GS, браузер Android 2.2 по умолчанию и браузер Dolphin на Android.

Он работает во всех браузерах для настольных компьютеров, от IE7 до IE9, FF3.5, Safari 4 и Opera.

Шрифты и CSS взяты из FontSquirrel: 

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

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

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

Я проверил идентификатор SVG в источнике шрифтов SVG, и все они совпадают.

Может быть, потому, что у меня есть некоторые правила межбуквенного интервала позже в CSS?

Спасибо!

Ответы [ 2 ]

17 голосов
/ 04 февраля 2011

Как оказалось, синтаксис был неверным. Я наткнулся на это решение через твиттер:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Это сработало отлично. Только что проверил во всех основных браузерах, и мои шрифты отображаются, в том числе на Android и iOS.

Теперь мой CSS выглядит так: 

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

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

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

Рад, что есть лучшее пуленепробиваемое решение, чем чертов смайлик.

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 08 августа 2014

Согласно http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 и 4.3 не поддерживают woff-шрифты. Так что вы также должны добавить ttf. Я тестирую на Android 4.1 и 4.2, и woff вроде бы в порядке! Но на 4.0.3 мне пришлось добавить шрифты tff.

См. Эту ссылку http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/, чтобы узнать, как загрузить шрифты ttf из Google.

...