Как встроить шрифты в HTML?

Я пытаюсь найти достойное решение (особенно со стороны SEO) для встраивания шрифтов в веб-страницы. До сих пор я видел консорциум W3C решение, который даже не работает на Firefox, и Это очень круто решением. Второе решение касается только названий. Есть ли решение для полного текста? Я устал от стандартных шрифтов для веб-страниц.

спасибо!

76
embed flash fonts html javascript

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-face Generator что позволяет загружать файл TTF или OTF и получать автоматически преобразованные файлы шрифтов для других типов, а также предварительно построенный CSS и демо HTML-страница. Шрифт белка также имеет сотни наборов @font-face.

дизайн Soma также собрал FontFriend Букмарклет, который переопределяет шрифты на странице на лету, чтобы вы могли попробовать вещи. Он включает поддержку перетаскивания @font-face в FireFox 3.6+.

совсем недавно Google начал предоставлять Веб-Шрифты Google, ассортимент шрифтов, доступных под лицензией с открытым исходным кодом и обслуживаемых от Google сервера.

Лицензионные Ограничения

наконец, WebFonts.info собрал хороший список wiki из шрифты, доступные для встраивания @font-face на основе лицензии. Он не претендует на исчерпывающий список, но шрифты на нем должны быть доступны (возможно, с такими условиями, как атрибуция в файле CSS) для встраивания/связывания. важно прочитать лицензии, потому что есть некоторые ограничения, которые не толкнул вперед, очевидно, на загрузку шрифтов.

127

попробовать Facetype.js, вам превратить вашу .TTF шрифт в файл Javascript. Полный SEO совместим, поддерживает FF, IE6 и Safari и изящно деградирует в других браузерах.

9

нет, нет достойного решения для типа тела, если вы не готовы обслуживать только тех, у кого есть браузеры с кровотечением.

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

я справляюсь с sIFR для типа отображения (заголовки, заголовки сообщений в блоге и т. д.) и использование одного из менее изношенных веб-безопасных шрифтов для типа тела (например, Trebuchet MS). Если вам надоели все веб-безопасные шрифты, вы, вероятно, определяете термин слишком узко-посмотрите на эта матрица фондовых шрифтов этот корабль с основными ОС и, скорее всего, вы сможете найти каскад шрифтов, который поймает почти всех веб-пользователей.

например: font-family: "Lucida Grande", "Verdana", sans-serif - общий каскад шрифтов; OS X поставляется с Lucida Grande, но те, у кого есть Windows, получат Verdana, веб-безопасный шрифт с буквами аналогичного размера и формы Lucida Grande. Пользователи Linux также будет Verdana, если они установили пакет веб-безопасных шрифтов, который существует в менеджерах пакетов большинства дистрибутивов, или они вернутся к обычному без засечек.

6

и это маловероятно - EOT является довольно ограничительным форматом, который поддерживается только IE. Как Safari 3.1, так и Firefox 3.1 (ну, текущая альфа) и, возможно, Opera 9.6 поддерживают встраивание шрифта true type (ttf), и, по крайней мере, Safari поддерживает шрифты SVG через тот же механизм. Список отдельно имел хорошее обсуждение об этом некоторое время назад.

4

проверить Typekit, коммерческий вариант (у них также есть бесплатный пакет).

Он использует различные методы в зависимости от того, какой браузер используется (@font-face и EOT format), и они также заботятся обо всех проблемах лицензирования шрифтов для вас. Он поддерживает все, вплоть до IE6.

вот еще информация о том, как Typekit работает:

3

Я задал этот некоторое время назад. Ответ в том, что это не работает. :(

2