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

Question

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

Спасибо!

Answer 1

Все изменилось поскольку этот вопрос был изначально задан и на него был дан ответ.Был проделан большой объем работы по встраиванию кроссбраузерных шрифтов в основной текст с использованием встраивания @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");
}

Работая с этой базы, Шрифт Белка соберите воедино множество полезных инструментов, включая @генератор шрифтов-граней который позволяет вам загружать файл TTF или OTF и получать автоматически преобразованные файлы шрифтов для других типов, наряду с предварительно созданным CSS и демонстрационной HTML-страницей.Шрифт Squirrel также имеет Сотни наборов @font-face.

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

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

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

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

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

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

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http://www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

Answer 6

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