Как встроить шрифты в HTML?
-
03-07-2019 - |
Вопрос
Я пытаюсь найти достойное решение (особенно со стороны SEO) для встраивания шрифтов в веб-страницы.До сих пор я видел решение W3C, который даже не работает в Firefox, и это довольно классное решение.Второе решение предназначено только для заголовков.Есть ли решение, доступное для полного текста?Я устал от стандартных шрифтов для веб-страниц.
Спасибо!
Решение
Все изменилось поскольку этот вопрос был изначально задан и на него был дан ответ.Был проделан большой объем работы по встраиванию кроссбраузерных шрифтов в основной текст с использованием встраивания @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) для встраивания / компоновки. Важно ознакомиться с лицензиями, потому что существуют некоторые ограничения, которые, очевидно, не распространяются на загрузку шрифтов.
Другие советы
Попробуй Facetype.js, вы конвертируете свой шрифт .TTF в файл Javascript.Полностью совместим с SEO, поддерживает FF, IE6 и Safari и корректно ухудшается в других браузерах.
Нет, подходящего решения для типа телосложения не существует, если только вы не хотите обслуживать только тех, у кого самые современные браузеры.
У Microsoft есть УТОК, их собственная запатентованная технология встраивания шрифтов, но я годами не слышал, чтобы о ней говорили, и я не знаю никого, кто бы ею пользовался.
Я использую sIFR для определения типа отображения (заголовки, заголовки сообщений в блогах и т.д.) И использую один из менее изношенных веб-безопасных шрифтов для основного типа (например, Trebuchet MS).Если вам наскучили все эти веб-безопасные шрифты, вы, вероятно, слишком узко определяете этот термин — посмотрите на эта матрица стандартных шрифтов это поставляется с основными операционными системами, и, скорее всего, вы сможете найти каскад шрифтов, который заинтересует почти всех веб-пользователей.
Например: font-family: "Lucida Grande", "Verdana", sans-serif
является обычным каскадом шрифтов;OS X поставляется с Lucida Grande, но те, у кого установлена Windows, получат Verdana, веб-безопасный шрифт с буквами того же размера и формы, что и Lucida Grande.Пользователи Linux также получат Verdana, если они установили пакет web-safe fonts, который существует в менеджерах пакетов большинства дистрибутивов, в противном случае они вернутся к обычному шрифту без засечек.
И это тоже маловероятно - EOT - довольно ограниченный формат, который поддерживается только IE.И Safari 3.1, и Firefox 3.1 (ну, текущая альфа-версия) и, возможно, Opera 9.6 поддерживают встраивание шрифтов true type (ttf), и, по крайней мере, Safari поддерживает SVG-шрифты с помощью того же механизма.A list apart некоторое время хорошо обсуждал это Назад.
Проверьте Набор типов, коммерческий вариант (у них тоже есть бесплатный пакет).
Он использует различные методы в зависимости от того, какой браузер используется (@font-face
против. EOT
формат), и они также позаботятся обо всех вопросах лицензирования шрифтов для вас.Он поддерживает все, вплоть до IE6.
Вот еще немного информации о том, как работает Typekit:
Я спросил об этом некоторое время назад.Ответ в основном заключается в том, что это не работает.:(