Я работаю над сайтом, на котором требуются пробные версии шрифтов в Интернете, все шрифты, которые у меня есть, - .otf
Есть ли способ встроить шрифты и заставить их работать во всех браузерах?
Если нет, какие у меня есть альтернативы?
Я работаю над сайтом, на котором требуются пробные версии шрифтов в Интернете, все шрифты, которые у меня есть, - .otf
Есть ли способ встроить шрифты и заставить их работать во всех браузерах?
Если нет, какие у меня есть альтернативы?
Ответы:
Вы можете реализовать свой OTF
шрифт используя @ font-face, например:
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
Однако , если вы хотите , чтобы поддерживать широкий спектр современных браузеров я бы рекомендовал вам перейти WOFF
и TTF
типов шрифтов. WOFF
Тип реализован всеми основными настольными браузерами, в то время как TTF
тип является запасным вариантом для старых браузеров Safari, Android и iOS. Если ваш шрифт бесплатный, вы можете конвертировать его, например, через онлайн-шрифт .
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Если вы хотите поддерживать почти все браузеры, которые все еще существуют (больше не нужны, IMHO), вы должны добавить еще несколько типов шрифтов, таких как:
@font-face {
font-family: GraublauWeb;
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 */
}
Вы можете прочитать больше о том, почему все эти типы реализованы и их хаки здесь . Чтобы получить подробное представление о том, какие типы файлов поддерживаются какими браузерами, см .:
Поддержка браузера @ font-face
надеюсь это поможет
"
) в примерах кода?
Из примеров Google Font Directory :
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Это работает через браузер с .ttf, я думаю, что это может работать с .otf. ( Википедия говорит, что .otf в основном обратно совместим с .ttf) Если нет, вы можете конвертировать .otf в .ttf.
Вот несколько хороших сайтов:
Хороший учебник:
Дополнительная информация: