Веб-типографика - Web typography

Веб-шрифты позволяют веб-дизайнерам использовать шрифты, которые не установлены на компьютере зрителя.

Веб-типографика относится к использованию шрифтов во всемирной паутине . Когда HTML был впервые создан, шрифты и стили шрифтов контролировались исключительно настройками каждого веб-браузера . Не существовало механизма для отдельных веб-страниц для управления отображением шрифтов, пока Netscape не представила этот fontэлемент в 1995 году, который затем был стандартизирован в спецификации HTML 3.2. Однако шрифт, указанный в fontэлементе, должен был быть установлен на компьютере пользователя, в противном случае использовался бы запасной шрифт, например шрифт без засечек или моноширинный шрифт браузера по умолчанию . Первая спецификация каскадных таблиц стилей была опубликована в 1996 году и обеспечивала те же возможности.

Спецификация CSS2 была выпущена в 1998 году и была предпринята попытка улучшить процесс выбора шрифта, добавив сопоставление шрифтов, синтез и загрузку. Эти методы не получили широкого применения и были удалены в спецификации CSS2.1. Однако Internet Explorer добавил поддержку функции загрузки шрифтов в версии 4.0 , выпущенной в 1997 году. Загрузка шрифтов была позже включена в модуль шрифтов CSS3 и с тех пор реализована в Safari 3.1 , Opera 10 и Mozilla Firefox 3.5 . Впоследствии это повысило интерес к веб-типографике, а также к использованию загрузки шрифтов.

CSS1

В первой спецификации CSS авторы указали характеристики шрифта с помощью ряда свойств:

• font-family
• font-style
• font-variant
• font-weight
• font-size

Все шрифты определялись исключительно по названию. Помимо свойств, упомянутых выше, у дизайнеров не было возможности стилизовать шрифты, и не существовало механизма для выбора шрифтов, отсутствующих в клиентской системе.

Веб-безопасные шрифты

Веб-безопасные шрифты - это шрифты, которые, вероятно, присутствуют в широком спектре компьютерных систем и используются авторами веб- содержимого для увеличения вероятности отображения содержимого с использованием выбранного ими шрифта. Если у посетителя веб-сайта нет указанного шрифта, его браузер пытается выбрать аналогичную альтернативу на основе заданных автором запасных шрифтов и общих семейств или использует подстановку шрифтов, определенную в операционной системе посетителя.

Основные шрифты Microsoft для Интернета

С момента выпуска в рамках программы Microsoft Core fonts для веб- программы, Arial, Georgia и Verdana стали де-факто тремя шрифтами Интернета.

Чтобы гарантировать, что все пользователи Интернета имеют базовый набор шрифтов, Microsoft запустила инициативу Core fonts for the Web в 1996 году (прекращенную в 2002 году). Выпущенные шрифты включают Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings и Verdana - в соответствии с лицензионным соглашением, которое делало их свободно распространяемыми, но также ограничивало некоторые права на их использование. Благодаря высокому уровню проникновения они стали незаменимыми для веб-дизайнеров. Однако большинство дистрибутивов 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

Шрифты по умолчанию в данной системе в моноширинном стиле

ui-закругленный

Шрифты по умолчанию в данной системе в закругленном стиле

Смайлики

Шрифты с использованием эмодзи

Математика

Шрифты для сложных математических формул и выражений.

Фангсонг ( китайский :仿宋 体)

Китайские шрифты, которые находятся между шрифтами Song с засечками и курсивом Kai. Этот стиль часто используется для правительственных документов.

Веб-шрифты

История

Метод ссылки на удаленные шрифты и их автоматической загрузки был впервые указан в спецификации 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 , и с тех пор браузеры добавили поддержку.

Google Fonts был запущен в 2010 году для обслуживания веб-шрифтов по лицензиям с открытым исходным кодом . К 2016 году доступно более 800 семейств веб-шрифтов.

Веб-шрифты стали важным инструментом для веб-дизайнеров, и с 2016 года большинство сайтов используют веб-шрифты.

Форматы файлов

Используя особую технику встраивания CSS , можно встраивать шрифты таким образом, чтобы они работали с IE4 +, Firefox 3.5+, Safari 3.1+, Opera 10+ и Chrome 4.0+. Это позволяет подавляющему большинству пользователей Интернета получить доступ к этой функции. Некоторые коммерческие предприятия возражают против распространения своих шрифтов. Например, Hoefler и Фрер-Джонс говорит , что, в то время как они «... с энтузиазмом [поддержка] появление более выразительным Web , в которой разработчики могут безопасно и надежно использовать высококачественные шрифты в Интернете,» текущей поставки шрифтов , используя это считается «незаконным распространением» литейным заводом и не допускается. Вместо этого Hoefler & Co. предлагает проприетарную систему доставки шрифтов, основанную на облаке. Многие другие производители коммерческих шрифтов занимаются распространением своих шрифтов, предлагая конкретную лицензию, известную как лицензия веб-шрифтов, которая разрешает использование программного обеспечения шрифтов для отображения контента в Интернете, что обычно запрещено базовыми лицензиями для настольных компьютеров. Естественно, это не мешает шрифтам и литейным целям под бесплатными лицензиями. @font-face@font-face

TrueDoc

TrueDoc , хотя и не являлся спецификацией веб-шрифтов, был первым стандартом для встраивания шрифтов. Он был разработан типографией Bitstream в 1994 году и стал изначально поддерживаться в Netscape Navigator 4 в 1996 году. Из-за ограничений лицензии с открытым исходным кодом, когда Netscape не могла выпустить исходный код Bitstream, встроенная поддержка технологии прекратилась, когда был установлен Netscape Navigator 6. вышел. ActiveX плагин был доступен для добавления поддержки TrueDoc в Internet Explorer , но эта технология должна была конкурировать с Microsoft «s Embedded OpenType шрифты, которые изначально поддерживаются в браузере Internet Explorer , начиная с версии 4.0. Еще одним препятствием было отсутствие открытого или бесплатного инструмента для создания веб-шрифтов в формате TrueDoc, тогда как Microsoft предоставила бесплатный инструмент для встраивания веб-шрифтов для создания веб-шрифтов в их формате.

Встроенный OpenType

Internet Explorer поддерживает внедрение шрифтов через собственный стандарт Embedded OpenType, начиная с версии 4.0. Он использует методы управления цифровыми правами , чтобы предотвратить копирование и использование шрифтов без лицензии. Упрощенное подмножество EOT было формализовано под названием CWT ( Compatibility Web Type , ранее EOT-Lite ).

Масштабируемая векторная графика

Веб-типографика применима к SVG двумя способами:

1. Все версии спецификации SVG 1.1, включая подмножество SVGT , определяют модуль шрифтов, позволяющий создавать шрифты в документе SVG. Safari представила поддержку многих из этих свойств в версии 3. Opera добавила предварительную поддержку в версии 8.0 с поддержкой большего количества свойств в 9.0.
2. Спецификация SVG позволяет применять CSS к документам SVG аналогично HTML-документам, и правило может применяться к тексту в документах SVG. Opera добавила поддержку этого в версии 10, а WebKit, начиная с версии 325, также поддерживает этот метод, используя только шрифты SVG .@font-face

Шрифты масштабируемой векторной графики

Шрифты SVG были стандартом шрифтов W3C с использованием графики SVG, которая стала подмножеством шрифтов OpenType. Допускались многоцветные или анимированные шрифты. Это было первое подмножество спецификаций SVG 1.1, но оно устарело в спецификации SVG 2.0. Шрифты SVG как независимый формат поддерживаются большинством браузеров, кроме IE и Firefox, и устарели в Chrome (и Chromium). Сейчас это вообще не рекомендуется; Стандарт, с которым согласились большинство поставщиков браузеров, - это подмножество шрифтов SVG, включенное в OpenType (а затем надмножество WOFF, см. ниже), называемое SVGOpenTypeFonts . Firefox поддерживает SVG OpenType начиная с Firefox 26.

TrueType / OpenType

Связывание со стандартными шрифтами 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's 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') format('woff'),
 		url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'),
 		url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'),
 		url('http://your-own.site/fonts/journal/journal.eot'),
 		url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');
 	font-weight: normal;
 	font-style: normal;
 }

Практические соображения

На практике имеет значение не только то, какой веб-браузер использует аудитория, но и то, как настроена их операционная система. В 2010 году дизайнер шрифтов и консультант Томас Финни (вице-президент FontLab, ранее работавший в Adobe) написал пошаговый процесс поиска лучшего решения для рендеринга, которое - более или менее в шутку - использует большое количество операторов goto . Более наглядная блок-схема была размещена в том же году на форуме Typophile Михаилом Заец.

Смотрите также

• Масштабируемая замена вспышки Inman
• Список RFC, упомянутых в WOFF (проект от 23.10.2009):
  • RFC  1950 Спецификация формата сжатых данных ZLIB
  • RFC  2119 Ключевые слова для использования в RFC для обозначения уровней требований
  • RFC  4647 Сопоставление языковых тегов

Примечания

использованная литература

внешние ссылки

• Спецификация шрифтов CSS W3C
• Typoscan - это дизайнерский инструмент, который поможет вам сканировать типографику любого веб-сайта менее чем за секунду.