@font-face не работает в мобильном Webkit
У меня возникли проблемы с тем, чтобы @font-face
вести себя в любом просматриваемом браузере Webkit, который я тестировал, - 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 ID в источнике шрифта SVG, и все они совпадают.
Может быть, потому, что в CSS уже есть некоторые правила межстрочного интервала?
Спасибо!
Ответы
Ответ 1
Как оказалось, синтаксис был неправильным. Я наткнулся на это решение через твиттер:
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;
}
Приятно знать, что там лучше пуленепробиваемое решение, чем взломать смайлик dang.
Надеюсь, это поможет кому-то!
Ответ 2
Согласно 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.