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

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

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

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

ОТВЕТЫ

Ответ 1

Вы можете реализовать свой шрифт 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. Если ваш шрифт является бесплатным шрифтом, вы можете преобразовать шрифт, например, onlinefontconverter.

@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 */
}

Вы можете узнать больше о том, почему все эти типы реализованы, и их хаки здесь. Чтобы получить подробное представление о том, какие типы файлов поддерживаются браузерами, см.:

@Поддержка браузера на шрифте

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

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

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

Поддержка браузера SVG-шрифтов

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

Ответ 2

В Справочниках 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. (Wikipedia говорит, что .otf в основном обратно совместим с .ttf) Если нет, вы можете convert.otf в .ttf

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