Для этого нужно использовать CSS-объявление @ font-face, которое позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах. Позволяя авторам предоставлять свои собственные шрифты, @ font-face устраняет необходимость зависеть от ограниченного числа шрифтов, установленных пользователями на их компьютерах.
Посмотрите на следующую таблицу:
Как видите, есть несколько форматов, о которых вам нужно знать, в основном из-за кросс-браузерной совместимости. Сценарий в мобильных устройствах не сильно отличается.
Решения:
1 - Полная совместимость браузера
Это метод с самой глубокой поддержкой, возможной сейчас:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - Большая часть браузера
Вещи сильно смещаются в сторону WOFF , так что вы можете сойти с рук:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Только самые последние браузеры
Или даже просто вон.
Затем вы используете это так:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Ссылки и дальнейшее чтение:
Это в основном то, что вам нужно знать о реализации этой функции. Если вы хотите больше изучить эту тему, я рекомендую взглянуть на следующие ресурсы. Большая часть того, что я положил здесь, извлечена из следующего
@font-face
он получил гораздо большую поддержку и рекомендуется для общего использования. Вы просто должны знать, что IE требует шрифты в другом формате для других браузеров. См. Stackoverflow.com/questions/2219916/is-font-face-usable-now