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

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

Спасибо!

Ответы

Ответ 1

Все изменилось, поскольку этот вопрос изначально был задан и ответил. Проделана большая работа по внедрению кросс-браузерного шрифта для основного текста для работы с использованием @font-face внедрения.

Paul Irish собрал Пуленепробиваемый @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 также имеет Сотни @шрифтовых наборов.

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

Совсем недавно Google начал предоставлять Google Web Fonts, ассортимент шрифтов, доступных по лицензии Open Source, и обслуживался с серверов Google.

Ограничения лицензии

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

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

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