Войти
Веб-шрифты позволяют веб-дизайнерам использовать шрифты, которые не установлены на компьютере зрителя. Веб-типографика относится к использованию шрифтов в World Wide Web. Когда HTML был впервые создан, шрифты и стили шрифтов контролировались исключительно настройками каждого веб-браузера. Для отдельных веб-страниц не было механизма управления отображением шрифтов, пока в 1995 г. Netscape не представил элемент font, который затем был стандартизирован в спецификации HTML 3.2. Однако шрифт, указанный в элементе font, должен был быть установлен на компьютере пользователя или резервным шрифтом, например шрифтом по умолчанию sans-serif или моноширинным в браузере. шрифт, будет использоваться. Первая спецификация каскадных таблиц стилей была опубликована в 1996 году и обеспечивала те же возможности.
Спецификация CSS2 была выпущена в 1998 году и была предпринята попытка улучшить процесс выбора шрифта, добавив сопоставление шрифтов, синтез и загрузку. Эти методы не получили широкого применения и были удалены в спецификации CSS2.1. Однако в Internet Explorer добавлена поддержка функции загрузки шрифтов в версии 4.0, выпущенной в 1997 году. Загрузка шрифтов была позже включена в модуль шрифтов CSS3 и с тех пор реализована в Safari 3.1, Opera 10 и Mozilla Firefox 3.5. Впоследствии это повысило интерес к веб-типографике, а также к использованию загрузки шрифтов.
В первой спецификации CSS авторы указали характеристики шрифта с помощью ряда свойств:
font-familyfont-stylefont-variantfont-weightfont-sizeВсе шрифты определялись исключительно по имени. Помимо свойств, упомянутых выше, у дизайнеров не было возможности стилизовать шрифты, и не существовало механизма для выбора шрифтов, отсутствующих в клиентской системе.
Веб-шрифты - это шрифты, которые, вероятно, присутствуют в широком спектре компьютерных систем и используются Web авторов контента, чтобы повысить вероятность того, что контент будет отображаться с использованием выбранного ими шрифта. Если посетитель веб-сайта не имеет указанного шрифта, его браузер пытается выбрать аналогичную альтернативу на основе указанных автором запасных шрифтов и общих семейств или использует замена шрифта, определенная в операционной системе посетителя.
С момента выпуска в рамках программы Microsoft Основные шрифты для Интернета, Arial, Georgia и Verdana стали де-факто тремя шрифтами Интернета. Чтобы гарантировать, что у всех пользователей Интернета есть базовый набор шрифтов, Microsoft запустила инициативу Core fonts for the Web в 1996 году (прекращенную в 2002 году). Выпущенные шрифты: Arial, Courier New, Times New Roman, Comic Sans, Impact, Джорджия, Trebuchet, Webdings и Verdana - в соответствии с EULA, которое делало их свободно распространяемыми, но также ограничивало некоторые права на их использовать. Их высокий уровень проникновения сделал их основным продуктом для веб-дизайнеров. Однако большинство дистрибутивов Linux не включают эти шрифты по умолчанию.
CSS2 попытался расширить инструменты, доступные веб-разработчикам, путем добавления синтеза шрифтов, улучшенного сопоставления шрифтов и возможности загрузки удаленных шрифтов.
Некоторые свойства шрифтов CSS2 были удалены из CSS2.1 и более поздних версий включены в CSS3.
Спецификация CSS позволяет указывать несколько шрифтов как резервные. В CSS свойство font-familyпринимает список используемых шрифтов, разделенных запятыми, например:
font-family: "Nimbus Sans L", Helvetica, Arial, sans-serif;
Первый указанный шрифт является предпочтительным. Если этот шрифт недоступен, веб-обозреватель пытается использовать следующий шрифт в списке. Если ни один из указанных шрифтов не найден, браузер отображает шрифт по умолчанию. Этот же процесс также происходит для каждого символа, если браузер пытается отобразить символ, отсутствующий в указанном шрифте.
Чтобы дать веб-дизайнерам некоторый контроль над внешним видом шрифтов на своих веб-страницах, даже когда указанные шрифты недоступны, спецификация CSS допускает использование нескольких общих семейства шрифтов. Эти семейства предназначены для разделения шрифтов на несколько категорий в зависимости от их общего вида. Обычно они указываются как последние в серии резервных шрифтов, как последнее средство в случае, если ни один из шрифтов, указанных автором, недоступен. В течение нескольких лет существовало пять общих семейств:
CSS 4 вводит несколько новых параметров:
System-ui
ui-serif
ui-sans-serif
ui-monospace
со скругленными углами
Метод ссылки и автоматической загрузки удаленных шрифтов был впервые указан в спецификации CSS2, которая представила @ font-faceконструкция. В то время получение файлов шрифтов из Интернета было спорным, потому что шрифты, предназначенные для использования только для определенных веб-страниц, также могли быть загружены и установлены в нарушение лицензии на шрифты.
Microsoft сначала добавила поддержку загружаемых EOT шрифты в Internet Explorer 4 в 1997 году. Авторам приходилось использовать собственный инструмент WEFT для создания файла с подмножествами шрифтов для каждой страницы. EOT показал, что веб-шрифты могут работать, и формат нашел некоторое применение в системах письма, не поддерживаемых общими операционными системами. Однако этот формат так и не получил широкого признания и в конечном итоге был отвергнут W3C.
В 2006 году Хокон Виум Ли начал кампанию против использования EOT и предпочел, чтобы веб-браузеры поддерживали широко используемые форматы шрифтов. С тех пор поддержка широко используемых форматов шрифтов TrueType и OpenType была реализована в Safari 3.1, Opera 10, Mozilla Firefox 3.5 и Internet Explorer 9.
В 2010 году метод сжатия WOFF для шрифтов TrueType и OpenType был представлен в W3C организациями Mozilla Foundation, Opera Software и Microsoft <70.>, и с тех пор браузеры добавили поддержку.
Google Fonts был запущен в 2010 году для обслуживания веб-шрифтов под лицензиями с открытым исходным кодом. К 2016 году доступно более 800 семейств веб-шрифтов.
Веб-шрифты стали важным инструментом для веб-дизайнеров, и по состоянию на 2016 г. большинство сайтов используют веб-шрифты.
Используя особую технику внедрения CSS @ font-face, можно встраивать шрифты таким образом, чтобы они работали с IE4 +, Firefox 3.5+, Safari 3.1+, Opera 10+ и Chrome 4.0+. Это позволяет подавляющему большинству пользователей Интернета получить доступ к этой функции. Некоторые коммерческие предприятия возражают против распространения своих шрифтов. Например, Hoefler Frere-Jones говорит, что, хотя они «... с энтузиазмом [поддерживают] появление более выразительной сети, в которой дизайнеры могут безопасно и надежно использовать высококачественные шрифты в Интернете», текущая доставка шрифтов с использованием @ font-faceсчитается "незаконным распространением" литейщиком и не разрешена. Вместо этого Hoefler Co. предлагает проприетарную систему доставки шрифтов, основанную на облаке. Многие другие производители коммерческих шрифтов обращаются к распространению своих шрифтов, предлагая конкретную лицензию, известную как лицензия веб-шрифтов, которая разрешает использование программного обеспечения шрифтов для отображения контента в сети, что обычно запрещено базовыми лицензиями для настольных компьютеров. Естественно, это не мешает шрифтам и литейным предприятиям под бесплатными лицензиями.
TrueDoc, хотя и не был определенно спецификацией веб-шрифтов, был первым стандартом для встраивания шрифтов. Он был разработан типографией Bitstream в 1994 году и стал изначально поддерживаться в Netscape Navigator 4 в 1996 году. Из-за ограничений лицензии с открытым исходным кодом Netscape не смогла выпустить исходный код Bitstream., нативная поддержка технологии прекратилась с выходом Netscape Navigator 6. Доступен плагин ActiveX для добавления поддержки TrueDoc в Internet Explorer, но эта технология должна была конкурировать с Microsoft Embedded OpenType шрифты, которые изначально поддерживаются в их браузере Internet Explorer с версии 4.0. Еще одним препятствием было отсутствие открытого или бесплатного инструмента для создания веб-шрифтов в формате TrueDoc, тогда как Microsoft предоставила бесплатный Web Embedding Fonts Tool для создания веб-шрифтов в их формате.
Internet Explorer поддерживает встраивание шрифтов через собственный стандарт Embedded OpenType начиная с версии 4.0. Он использует методы управления цифровыми правами, чтобы предотвратить копирование и использование шрифтов без лицензии. Упрощенное подмножество EOT было формализовано под названием CWT (Compatibility Web Type, ранее EOT-Lite)
Web-типографика применяется к SVG в двумя способами:
@ font-faceможет применяться к тексту в документах SVG. Opera добавила поддержку этого в версии 10, а WebKit, начиная с версии 325, также поддерживает этот метод с использованием только.были стандартом W3C шрифтов с использованием графики SVG, которая стал подмножеством шрифтов OpenType. Допускались многоцветные или анимированные шрифты. Это было первое подмножество спецификаций SVG 1.1, но оно устарело в спецификации SVG 2.0. Шрифты SVG как независимый формат поддерживаются большинством браузеров, кроме IE и Firefox, и не рекомендуются в Chrome (и Chromium). Сейчас это вообще не рекомендуется; стандарт, с которым согласились большинство поставщиков браузеров, - это подмножество шрифтов SVG, включенное в OpenType (а затем надмножество WOFF, см. ниже), называемое. Firefox поддерживает SVG OpenType с Firefox 26.
Связывание со стандартными шрифтами TrueType (TTF) и OpenType (TTF / OTF) поддерживается в Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+ и Google Chrome 4.0+. Internet Explorer 9+ поддерживает только те шрифты, для которых установлены разрешения на внедрение.
Формат открытых веб-шрифтов (WOFF) по существу равен OpenType или TrueType со сжатием и дополнительными метаданными. WOFF поддерживается Mozilla Firefox 3.6+, Google Chrome 5+, Opera Presto и поддерживается Internet Explorer 9 (начиная с 14 марта 2011 г.). Поддержка доступна в Mac OS X Lion Safari, начиная с версии 5.1.
На платформе Windows по умолчанию доступны только два шрифта: Microsoft Sans Serif и Lucida Sans Unicode, обеспечьте широкий набор символов Unicode. Ошибка в Verdana (и различная обработка ее различными пользовательскими агентами ) затрудняет ее использование там, где требуется комбинирование символов.
На бесплатных платформах с открытым исходным кодом, таких как Linux, GNU Unifont и GNU FreeFont, предоставляют широкий диапазон символов Unicode.
Распространенным препятствием в веб-дизайне является разработка макетов, которые включают шрифты, которые не являются веб-безопасными. Для подобных ситуаций существует ряд решений. Одним из распространенных решений является замена текста аналогичным веб-шрифтом или использование набора аналогичных резервных шрифтов.
Другой метод - замена изображения. Эта практика включает наложение текста на изображение, содержащее тот же текст, написанный желаемым шрифтом. Это хорошо для эстетических целей, но предотвращает выделение текста, увеличивает использование полосы пропускания, плохо для поисковой оптимизации и делает текст недоступным для пользователей с ограниченными возможностями.
Также распространено использование решений на основе Flash, таких как sIFR. Это похоже на методы замены изображения, хотя текст можно выбрать и отобразить как вектор. Однако этот метод требует наличия проприетарного плагина в системе клиента.
Другое решение - использование Javascript для замены текста на VML (для Internet Explorer) или SVG (для всех других браузеров).
Шрифт Услуги хостинга позволяют пользователям оплачивать подписку на размещение шрифтов, не являющихся безопасными для Интернета. Большинство служб размещают шрифт для пользователя и предоставляют необходимое объявление CSS @ font-face.
Пример настройки CSS @ font-face:
@ font-face {font-family: 'Journal'; src: url ('http://your-own.site/fonts/journal/journal.woff') формат ('woff'), url ('http://your-own.site/fonts/journal/journal. svg # Journal ') формат (' svg '), url (' http://your-own.site/fonts/journal/journal.ttf ') формат (' truetype '), url (' http: // your- own.site/fonts/journal/journal.eot '), формат url (' http://your-own.site/fonts/journal/journal.eot?#iefix ') (' embedded-opentype '); font-weight: нормальный; стиль шрифта: нормальный; }На практике имеет значение не только то, какой веб-браузер использует аудитория, но и то, как настроена их операционная система. В 2010 году дизайнер шрифтов и консультант Томас Финни (вице-президент FontLab, ранее работавший в Adobe) написал пошаговый процесс поиска лучшего решения для рендеринга, в котором - более или менее в шутку - используется большой количество операторов goto. Более визуально ориентированная блок-схема была размещена в том же году на форуме Михей Заец.
