Использование шрифтов .otf в веб-браузерах

440

Я работаю над сайтом, на котором требуются пробные версии шрифтов в Интернете, все шрифты, которые у меня есть, - .otf

Есть ли способ встроить шрифты и заставить их работать во всех браузерах?

Если нет, какие у меня есть альтернативы?

html css fonts font-face Наруто
источник
1
Может быть, JavaScript должен быть удален из списка тегов здесь?
кж

Ответы:

756

Вы можете реализовать свой 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

EOT Browser Поддержка

Поддержка браузера WOFF

Поддержка браузера TTF

Поддержка браузера SVG-Fonts

надеюсь это поможет

Choise
источник
1
Он прекрасно работал почти во всех браузерах ... Единственный браузер, который не работал, это FireFox Linux ... Есть предложения?
Наруто
3
Обратите внимание, что если вы размещаете это на сервере Windows, вы должны добавить тип файла .otf как допустимый и обслуживаемый тип файла. Единственный способ убедиться, что это проблема, - перейти по ссылке на шрифт (ошибка 404, если это так). Вы можете временно переименовать в .ttf или даже .html для тестирования. Единственным веб-шрифтом, поддерживаемым IE, является формат WOFF. (Нет, никогда об этом не слышал!)
Хенрик Эрландссон,
Эй, как насчет исполнения этого типа шрифта? Это хорошо? Или другой лучше?
Энджи Азиз
Есть ли кавычки ( ") в примерах кода?
Штеффен
2
Похоже, что теперь otf должен работать почти по всем направлениям caniuse.com/#search=otf
Стивен
49

Из примеров 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.

Вот несколько хороших сайтов:

КЖ
источник