Как встроить шрифты в HTML?
6 ответов
Вещи изменились с тех пор, как этот вопрос был задан первоначально и на него был дан ответ. Была проделана большая работа по получению межбраузерного встраивания шрифтов для работы основного текста с помощью встраивания @font-face.
Пол Айриш собрал Пуленепробиваемый синтаксис @font-face , объединив попытки нескольких других людей. Если вы действительно прочитаете всю статью (а не только ее верхнюю часть), это позволит одному @font-face заявлению охватить IE, Firefox, Safari, Opera, Chrome и, возможно, другие. В основном это может питать OTF, EOT, SVG и WOFF способами, которые ничего не нарушают.
Вырезанный из его статьи:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
Работая с этой базой, Font Squirrel собрал множество полезных инструментов, включая @font-face Generator , который позволяет загружать TTF или OTF файл и получать автоматически конвертируемые файлы шрифтов для других типов, а также предварительно построенный CSS и демонстрационную HTML страницу. Font Squirrel также имеет Сотни комплектов @font-face .
Soma Design также собрал FontFriend Bookmarklet, который переопределяет шрифты на странице "на лету", чтобы вы могли попробовать свои силы. Он включает поддержку drag-and-drop @font-face в FireFox 3.6+.
Совсем недавно компания Google начала предоставлять Web Fonts, ассортимент шрифтов, доступных по лицензии с открытым исходным кодом и обслуживаемых серверами Google.
License Restrictions
Наконец, WebFonts.info собрал хороший вики-список Fonts available for @font-face embedding, основанный на лицензиях. Он не претендует на исчерпывающий список, но шрифты в нем должны быть доступны (возможно, с такими условиями, как атрибуция в CSS-файле) для встраивания/ссылки. Важно прочитать лицензии , потому что есть некоторые ограничения, которые явно не продвигаются при загрузке шрифтов
.Попробуйте Facetype.js, Вы преобразовываете свой.TTF шрифт в файл JavaScript. Полная совместимая SEO, поддерживает FF, IE6 и Safari и ухудшается корректно на других браузерах.
Нет, нет достойного решения для основного шрифта, если Вы не готовы обслужить только на тех с новейшими браузерами.
Microsoft имеет УТОК , их собственная технология внедрения шрифтов, но я не услышал, что это говорило о в годах, и я не знаю никого, кто использует его.
я обхожусь sIFR для типа дисплея (заголовки, заголовки сообщений в блоге, и т.д.) и использование одного из less-worn-out веб-безопасных шрифтов для основного шрифта (как Trebuchet MS). Если Вы скучаете над всеми веб-безопасными шрифтами, Вы, вероятно, определяете термин слишком узко — В взгляд эта матрица шрифтов запаса , что поставка с главными Ose и возможностями, Вы будете в состоянии найти каскад шрифта, который поймает почти всех интернет-пользователей.
, Например: font-family: "Lucida Grande", "Verdana", sans-serif общий каскад шрифта; OS X идет с Lucida Grande, но те с Windows получат Verdana, веб-безопасный шрифт с буквами подобного размера и формы к Lucida Grande. Пользователи Linux также получат Verdana, если они установили веб-безопасный пакет шрифтов, который существует в диспетчерах пакетов большинства дистрибутивов, или иначе они отступят к обычному гротесковому шрифту.
И это маловероятно также - EOT является довольно строгим форматом, который поддерживается только IE. И Safari 3.1 и Firefox 3.1 (хорошо текущая альфа) и возможно Opera 9.6 поддерживает истинный печатный шрифт (ttf) встраивание, и по крайней мере Safari поддерживает шрифты SVG через тот же механизм. Список независимо имел хорошую дискуссию об этом некоторое время назад .
Я спросил это некоторое время назад . Ответ в основном, что он не работает.: (
Проверьте Typekit, коммерческий вариант (у них тоже есть бесплатный пакет).
Он использует различные методы в зависимости от того, какой браузер используется (@font-face vs. EOT format), и они также берут на себя все вопросы лицензирования шрифтов для вас. Он поддерживает все вплоть до IE6.
Вот еще информация о том, как работает Typekit: