Мне нужно использовать функцию @font-face
, а мои шрифты находятся в формате TrueType (TTF), поэтому как конвертировать TTF в формат OpenType (OTF).
Как преобразовать файлы TTF в формат OTF?
Ответ 1
вы можете использовать формат файла TTF непосредственно в css:
@font-face {
font-family: Vinegar;
src: url(http://www.4bit.co.uk/testing/design01/vinegar.ttf);
}
h3 {
font-family: Vinegar, "Times New Roman", Times, serif;
}
Он работает!
Ответ 2
Если вы работаете в Linux, вы можете использовать FontForge, который может быть написан на Python.
#!/usr/bin/python
import fontforge
font = fontforge.open("STIXGeneral.otf")
font.generate("STIXGeneral.ttf")
Вот более длинный скрипт на python, который делает это для всего каталога за раз:
Ответ 3
Было тяжело найти, как это сделать правильно. Вот как я получил его для работы с OS X
$ brew install fontforge
$ fontforge -c 'Open("my.ttf"); Generate("my.otf")'
Я отчаянно искал pip install fontforge
, который не существует, и у меня нет его работы с python. Думаю, вам нужно скомпилировать его с помощью --enable-pyextension
или что-то в этом роде.
Ответ 4
Быстрый поиск Google для ttf otf converter
дал мне ряд результатов, например:
https://onlinefontconverter.com
http://www.freefontconverter.com
Не знаю, как хорошо они работают, но вы можете попробовать их.
Ответ 5
Для поддержки кросс-браузера/мобильного телефона вам обязательно нужно как минимум три формата:
-
Встроенный OpenType:
eot
для Internet Explorer 6-8.
Существует конвертер командной строки: http://code.google.com/p/ttf2eot/ -
Формат веб-Open Font:
woff
рекомендация W3C для веб-сайтов: http://www.w3.org/TR/WOFF/
Здесь можно найти конвертер: http://people.mozilla.org/~jkew/woff/ -
и TrueType:
ttf
для Safari и Opera -
(Вы можете добавить Scalable Vector Graphics:
svg
для более старой поддержки iOS...)
Синтаксис пуленепробиваемой @font-face таков:
@font-face {
font-family: 'Vinegar';
src: url('vinegar.eot?') format('embedded-opentype'),
url('vinegar.woff') format('woff'),
url('vinegar.ttf') format('truetype'),
url('vinegar.svg#svgVinegar') format('svg');
}
Дополнительные ресурсы:
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
http://webfonts.info/
Вы также можете проверить этот инструмент:
https://github.com/zoltan-dulac/css3FontConverter
Ответ 6
Ответ 7
Вы также можете попробовать следующее: