Как встраивать шрифты в HTML?
Я пытаюсь найти достойное решение (особенно со стороны SEO) для встраивания шрифтов на веб-страницы. До сих пор я видел решение W3C, который даже не работает в Firefox, и это довольно крутое решение. Второе решение предназначено только для заголовков. Есть ли решение для полного текста? Я устал от стандартных шрифтов для веб-страниц.
Спасибо!
возможный дубликат Шрифты в Интернете
@ user2284570 На этот вопрос есть лучший ответ. Я закрыл другой как дубликат этого.
Есть ли обновленные ответы на этот вопрос? На все ответы уже более полувека. Кроме того, я не смог найти ссылку на MDN, если кто-нибудь знает.
Пожалуйста, дайте обновленный ответ и помогите миру. Я сам не занимаюсь HTML с 2011 года.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
И это тоже маловероятно - EOT - это довольно ограничительный формат, который поддерживается только IE. Как Safari 3.1, так и Firefox 3.1 (ну, текущая альфа) и, возможно, Opera 9.6 поддерживают встраивание шрифтов True Type (ttf), и, по крайней мере, Safari поддерживает шрифты SVG с помощью того же механизма. В отдельном списке было хорошее обсуждение этого вопроса назад.
Я это просил Некоторое время назад. Ответ в основном таков: это не работает. :(
Нет, нет достойного решения для типа телосложения, если только вы не готовы обслуживать только тех, кто пользуется новейшими браузерами.
У Microsoft есть ВЕФТЬ, собственная проприетарная технология встраивания шрифтов, но я не слышал о ней много лет, и я не знаю никого, кто ее использует.
Я использую sIFR для типа отображения (заголовки, заголовки сообщений в блогах и т. д.) И использую один из менее изношенных веб-безопасных шрифтов для типа тела (например, Trebuchet MS). Если вам наскучили все веб-безопасные шрифты, вы, вероятно, определяете этот термин слишком узко - посмотрите на эта матрица стоковых шрифтов, которые поставляются с основными операционными системами, и, скорее всего, вы сможете найти каскад шрифтов, который охватит почти все веб пользователей.
Например: font-family: "Lucida Grande", "Verdana", sans-serif - это общий каскад шрифтов; OS X поставляется с Lucida Grande, но те, у кого Windows, получат Verdana, веб-шрифт с буквами, похожими на Lucida Grande по размеру и форме. Пользователи Linux также получат Verdana, если они установили пакет веб-шрифтов, который существует в менеджерах пакетов большинства дистрибутивов, иначе они вернутся к обычному шрифту без засечек.
Позвольте мне также постоять на мыльнице на минутку: хотя я бы хотел, чтобы в Windows было больше "хороших" шрифтов (OS X имеет величайшие хиты в истории типографики: Futura, Helvetica, Gill Sans и т. д.), Это хорошо, что у нас есть сдерживаться при выборе шрифтов. Свободу тоже можно использовать во зло.
Без комментариев к вашему комментарию, но спасибо за ответ. Замечательно. Есть где-нибудь список каскадов? Еще раз спасибо.
Вот один список: (ampsoft.net/webdesign-l/WindowsMacFonts.html). Он консервативен, перечисляет только те шрифты, которые идентичны (или почти идентичны) для разных платформ. Возможно, вам придется провести сравнение, чтобы увидеть, какой «безопасный» шрифт больше всего похож на ваш «рискованный» шрифт.
(Да, также: всегда указывайте общий запасной вариант - без засечек, засечек или моноширинный. Таким образом, он будет, по крайней мере, приблизительным, если у пользователя будет никто запрошенных шрифтов.)
Превосходно. Еще раз спасибо. Хотя теперь, когда я думаю об этом, я могу просто украсть каскады с сайтов, которые мне нравятся.
Если под bleeding edge вы имеете в виду Safari 3.1, которая отсутствовала в течение 6 или 7 месяцев, а также Opera 9.2 (которая, как я полагаю, появилась, когда Opera добавила поддержку ttf), тогда да, bleeding edge - подходящее описание, но большинство люди не будут считать что-то передовым через много месяцев после выпуска
Большинство пользователей, которые приходят на сайты, над которыми я работаю, по-прежнему используют IE6 (эти ублюдки). С этой точки зрения я считаю, что последние основные версии являются передовыми.
Попробуйте Facetype.js, вы конвертируете свой шрифт .TTF в файл Javascript. Полная совместимость с SEO, поддержка FF, IE6 и Safari, постепенная деградация в других браузерах.
Для тех, кому интересно, как это работает, он использует тег холста (html 5) или VML.
Я должен согласиться с этим решением, оно выглядит чрезвычайно простым и, кажется, работает в каждом браузере, который я использую.
Эта ссылка мертва.
Времена изменились, так как этот вопрос изначально был задан и дан ответ. Был проделан большой объем работы по внедрению кроссбраузерного шрифта для основного текста с использованием встраивания @ 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 Генератор, который позволяет загружать файл TTF или OTF и получать автоматически преобразованные файлы шрифтов для других типов, а также предварительно созданные CSS и демонстрационную HTML-страницу. Шрифт Squirrel также имеет Сотни наборов @ font-face.
Soma Design также создала Букмарклет FontFriend, который переопределяет шрифты на странице на лету, чтобы вы могли попробовать что-нибудь. Он включает поддержку перетаскивания @ font-face в FireFox 3.6+.
Совсем недавно Google начал предоставлять Веб-шрифты Google, ассортимент шрифтов, доступных по лицензии с открытым исходным кодом и обслуживаемых с серверов Google.
Ограничения лицензии
Наконец, WebFonts.info составил хороший вики-список Шрифты, доступные для встраивания @ font-face на основе лицензий. Он не претендует на то, чтобы быть исчерпывающим списком, но шрифты в нем должны быть доступны (возможно, с такими условиями, как атрибуция в файле CSS) для встраивания / связывания. Важно читать лицензии, потому что есть некоторые ограничения, которые явно не распространяются на загрузку шрифтов.
Я думаю, стоит подчеркнуть, что вам не разрешается автоматически брать шрифт и @ font-face-ize, даже если вы купили лицензию на этот шрифт легально и за большие деньги. Вам необходимо проверить лицензию на шрифт, чтобы узнать, разрешено ли такое электронное распространение или нет. Нарушения настолько легко обнаружить и отследить, что в противном случае легко могут возникнуть проблемы, особенно если вы являетесь компанией, расположенной в правильной юрисдикции.
FontSquirrel четко указывает на это как в своих заранее созданных наборах шрифтов, так и в своем генераторе (который требует от вас проверки того, действительно ли шрифты лицензированы для такого использования). Существуют и другие инструменты преобразования, но я не знаю, какие из них имеют смысл обсуждать лицензирование.
Интересный материал. Из любопытства, как вы попали на этот пост? В тот же день было несколько ответов и несколько комментариев к вашему ответу. +1 ...
Я не помню, как я к этому пришел - возможно, поиск шрифта HTML, но я ответил, потому что я работал только над этим для клиента незадолго до Рождества, поэтому информация была свежей. Я предполагаю, что Пекка увидел в этом новую активность в старом посте; Я не знаю, пытается ли система пометить несколько ссылок (я знаю, что она изначально заблокирована), но я подумал, что это может быть случай «проверьте это, чтобы убедиться, что это не кто-то спамит».
@Pekka «Нарушения так легко обнаружить и провести траление» ... не могли бы вы меня немного просветить, пожалуйста ... как бы это обнаружение и траление было сделано, и при каких обстоятельствах это могло бы произойти?
Было бы нетривиально взглянуть на сайт или страницу и определить, нарушает ли он авторские права, но если вы дизайнер шрифтов, я подозреваю, что вы могли бы выполнить поиск по стандартному имени файла или имени шрифта вашего шрифта и найти варианты использования.
@fencepost, чтобы они полагались на имя, имена файлов и другие метаданные для обнаружения нарушений? Я понимаю, что все это гипотетически.
Это мое подозрение в отношении автоматического поиска - если предположить, что ни одна из поисковых систем на самом деле не индексирует фактические строки авторских прав в самих файлах, это, вероятно, основано на имени файла и имени шрифта. Конечно, люди, ориентированные на шрифт, могут взглянуть на страницу и сказать: «Эй, я знаю этот шрифт!» Поскольку дело не только в имени файла, изменение файла шрифта для изменения имен, а затем использование вашего настроенного файла кажется воровством ради воровства - если вы прикладываете столько усилий, найдите сопоставимый бесплатный шрифт в другом месте. Это как Celeron с водяным охлаждением, это не для производительности.
@fencepost: Теперь я понимаю, почему mediawiki разрешает полный атрибут стиля, но не теги стиля :-).
Обратите внимание на коммерческий вариант Typekit (у них также есть бесплатный пакет).
Он использует разные методы в зависимости от того, какой браузер используется (формат @font-face или EOT), и они также позаботятся обо всех вопросах лицензирования шрифтов за вас. Он поддерживает все, вплоть до IE6.
Вот еще немного информации о том, как работает Typekit:
X-Ref Как добавить на сайт нестандартный шрифт?