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

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

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

CSS1 [ править ]

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

  • 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 попытался расширить инструменты, доступные веб-разработчикам, путем добавления синтеза шрифтов, улучшенного сопоставления шрифтов и возможности загрузки удаленных шрифтов. [3]

Некоторые свойства шрифта CSS2 были удалены из CSS2.1 и позже включены в CSS3. [4] [5]

Резервные шрифты [ править ]

Основная статья: Резервный шрифт

Спецификация CSS позволяет указывать несколько шрифтов как резервные. [6] В CSS font-familyсвойство принимает список используемых шрифтов, разделенных запятыми, например:

семейство шрифтов :  "Nimbus Sans L" ,  Helvetica ,  Arial ,  sans-serif ;

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

Родовые семейства шрифтов [ править ]

Чтобы дать веб-дизайнерам некоторый контроль над внешним видом шрифтов на своих веб-страницах, даже если указанные шрифты недоступны, спецификация CSS позволяет использовать несколько общих семейств шрифтов. Эти семейства предназначены для разделения шрифтов на несколько категорий в зависимости от их общего вида. Обычно они указываются как последние в серии резервных шрифтов, как последнее средство в случае, если ни один из шрифтов, указанных автором, недоступен. В течение нескольких лет было пять родовых семейств: [6]

Без засечек

Шрифты без декоративной маркировки или засечек на буквах. Часто считается, что эти шрифты легче читать на экране. [7]

Засечки

Шрифты с декоративной маркировкой или засечками на своих символах. Эти шрифты традиционно используются в печатных книгах.

Моноширинный

Шрифты, в которых все символы имеют одинаковую ширину.

Курсив

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

Фантазия

Шрифты, которые могут содержать символы или другие декоративные свойства, но все же представляют указанный символ.

CSS 4 вводит несколько новых опций:

System-ui

Шрифты по умолчанию в данной системе: цель этой опции - позволить веб-контенту интегрироваться с внешним видом собственной ОС.

ui-serif

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

ui-sans-serif

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

ui-monospace

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

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

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

Эмодзи

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

Математика

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

Fangsong ( китайский :仿宋 体)

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

Веб-шрифты [ править ]

История [ править ]

Метод ссылки и автоматической загрузки удаленных шрифтов был впервые указан в спецификации CSS2, в которой была представлена ​​эта конструкция. В то время получение файлов шрифтов из Интернета было спорным, потому что шрифты, предназначенные для использования только на определенных веб-страницах, также могли быть загружены и установлены в нарушение лицензии на шрифты. [8]@font-face

Microsoft впервые добавила поддержку загружаемых шрифтов EOT в Internet Explorer 4 в 1997 году. Авторам пришлось использовать проприетарный инструмент WEFT для создания файла с подмножеством шрифтов для каждой страницы. EOT показал, что веб-шрифты могут работать, и формат нашел некоторое применение в системах письма, не поддерживаемых общими операционными системами. Однако этот формат так и не получил широкого распространения и в конечном итоге был отвергнут W3C. [9]

В 2006 году Хокон Виум Ли начал кампанию против использования EOT и предпочел, чтобы веб-браузеры поддерживали широко используемые форматы шрифтов. [10] [11] [12] С тех пор поддержка широко используемых форматов шрифтов TrueType и OpenType была реализована в Safari 3.1 , Opera 10 , Mozilla Firefox 3.5 и Internet Explorer 9 .

В 2010 году метод сжатия WOFF для шрифтов TrueType и OpenType был представлен в W3C Mozilla Foundation , Opera Software и Microsoft , и с тех пор браузеры добавили поддержку. [13] [14] [15]

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

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

Форматы файлов [ править ]

Основная статья: Сравнение браузерных движков (поддержка типографики)

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

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. [20]Еще одним препятствием было отсутствие открытого или бесплатного инструмента для создания веб-шрифтов в формате TrueDoc, тогда как Microsoft предоставила бесплатный инструмент для встраивания веб-шрифтов для создания веб-шрифтов в их формате.

Встроенный OpenType [ править ]

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

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

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

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

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

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

TrueType / OpenType [ править ]

Основные статьи: TrueType и OpenType

Связывание со стандартными шрифтами TrueType (TTF) и OpenType (TTF / OTF) поддерживается в Mozilla Firefox 3.5+, Opera 10+, [30] Safari 3.1+, [31] и Google Chrome 4.0+. [32] Internet Explorer 9+ поддерживает только те шрифты, для которых установлены разрешения на внедрение. [33]

Формат открытого веб-шрифта [ править ]

Основная статья: Формат открытого веб-шрифта

Формат открытых веб-шрифтов (WOFF) - это, по сути, OpenType или TrueType со сжатием и дополнительными метаданными. WOFF поддерживается Mozilla Firefox 3.6+, [34] Google Chrome 5+, [35] [36] Opera Presto , [37] и поддерживается Internet Explorer 9 (с 14 марта 2011 г.). [38] Поддержка доступна в Mac OS X Lion's Safari, начиная с версии 5.1.

Шрифты Unicode [ править ]

Только два шрифта, доступные по умолчанию на платформе Windows , Microsoft Sans Serif и Lucida Sans Unicode , обеспечивают широкий репертуар символов Unicode . Ошибка в Verdana (и другая обработка его различными пользовательскими агентами ) затрудняет его удобство и простоту использования , где сочетающие символы желательны.

На бесплатных программных платформах с открытым исходным кодом, таких как Linux , GNU Unifont и GNU FreeFont предоставляют широкий спектр символов Unicode .

Альтернативы [ править ]

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

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

Также распространено использование решений на основе Flash, таких как sIFR . Это похоже на методы замены изображений, хотя текст можно выбрать и отобразить как вектор. Однако этот метод требует наличия проприетарного плагина в системе клиента.

Другое решение - использовать Javascript для замены текста на VML (для Internet Explorer) или SVG (для всех других браузеров). [39]

Услуги хостинга шрифтов позволяют пользователям оплачивать подписку на размещение шрифтов, небезопасных для Интернета. Большинство служб размещают шрифт для пользователя и предоставляют необходимое объявление CSS.@font-face

Пример настройки CSS :@font-face

 @ font-face  {  font-family :  'Журнал' ;  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 [40] ) написал пошаговый процесс поиска лучшего решения для рендеринга, которое - более или менее в шутку - использует большое количество команд goto. заявления. [41] Более визуально ориентированная блок-схема была опубликована в том же году на форуме Typophile Михаилом Заец. [42]

См. Также [ править ]

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

Примечания [ править ]

  1. ^ См.Списки гарнитур шрифтов с открытым исходным кодом и бесплатных программ Unicode для таких шрифтов.

Ссылки [ править ]

  1. ^ Garaffa, Дэйв (2 сентября 1997). «Встроенные шрифты в Microsoft IE4pr2» . Internet.com . Архивировано из оригинала 8 июля 1998 года.
  2. ^ Каскадные таблицы стилей, уровень 1 , W3C, 1996-12-17
  3. ^ "Fonts" , Cascading Style Sheets, уровень 2: Спецификация CSS2 , World Wide Web Consortium , 1998-05-12 , получено 2009-07-28
  4. ^ CSS2.1 Изменения -C.2.97 Глава 15 Шрифты , World Wide Web Consortium , извлекаться 2010-01-30
  5. ^ Модуль CSS3: Web Fonts , World Wide Web Consortium , получено 30 января 2010 г.
  6. ^ a b "Спецификация CSS2" , Fonts , World Wide Web Consortium
  7. ^ Пул, Алекс (2005-04-07). «Что более разборчиво: гарнитуры с засечками или без засечек?» . Архивировано 22 июля 2017 года . Проверено 27 сентября 2017 .
  8. ^ Хилл, Билл (21.07.2008), Встраивание шрифтов в Интернете , Microsoft
  9. ^ Комментарий команды W3C
  10. ^ Забытая монополия Microsoft
  11. ^ Веб-шрифты: взгляд из свободного мира
  12. ^ CSS @ Ten: следующая большая вещь
  13. ^ WOFF File Format 1.0 Запрос на отправку в W3C
  14. ^ Galineau, Сильвен (2010-04-23), Знакомства Уофф, Формат Standard Web Font , Microsoft
  15. ^ Справочный код преобразования WOFF , получен 8 мая 2016 г.
  16. ^ "Новая база данных Google Fonts - рай для компьютерных фанатов" . Theverge.com . Дата обращения 24 августа 2016 .
  17. ^ Ричард Финк (2016-09-06) Webfonts в прерии , Alist Apart
  18. ^ Кимлер, Скотт Томас (2009-07-04), xBrowser Fonts - Expand Your Font Palette using CSS3 , получено 2010-02-05.
  19. ^ Wubben, Марк (27 февраля 2009). «Geek Meet: веб-типографика и sIFR 3 - слайды 15 и 16» . SlideShare . Проверено 17 марта 2010 года .
  20. ^ Niederst, Дженнифер (2001). В двух словах о веб-дизайне: краткий справочник для настольных компьютеров (2-е изд.) О'Рейли. п. 36 . ISBN 0-596-00196-7. Проверено 20 марта 2016 года . в каком году был разработан Truedoc.
  21. ^ Даггетт, Джон (31 июля 2009 г. ), EOT-Lite File Format v.1.1 , World Wide Web Consortium , получено 30 января 2010 г.
  22. ^ Миллс, Крис (2008-12-04), Opera Presto 2.2 и Opera 10 - первый взгляд , Opera Software , получено 30.01.2010
  23. ^ SVG в OpenType , W3C , получено 20 сентября 2014 г.
  24. ^ Красочная типографика в сети: приготовьтесь к разноцветным шрифтам , Pixel Ambacht , получено 20 сентября 2014 г.
  25. ^ Пример анимированного символа , people.Mozilla , получено 20 сентября 2014 г.
  26. ^ Fonts , W3C , получено 20 сентября 2014 г.
  27. ^ Глава о шрифтах , W3C , получено 8 марта 2018 г.
  28. ^ Могу ли я использовать SVG шрифты , CanIuse , извлекаться 2014-09-20
  29. ^ SVGOpenTypeFonts , Mozilla , извлекаться 2014-09-20
  30. ^ Миллс, Крис (2008-12-04), Opera Presto 2.2 и Opera 10 - первый взгляд , Opera Developer Community , получено 29 января 2010 г.
  31. ^ Марсал, Кэти (2007-02-07), Apple Safari 3.1 для поддержки загружаемых веб-шрифтов, другие , AppleInsider , получено 05.02.2010
  32. ^ Ирландец, Пол (25 января 2010 г.), Chrome и @ font-face: Он здесь!
  33. ^ Galineau, Сильвен (2010-07-15), CSS - Корнер: Лучше веб - типографика для лучшего дизайна , Microsoft
  34. ^ Шапиро, Мелисса (2009-10-20), Mozilla поддерживает формат открытых веб-шрифтов , Mozilla , получено 5 февраля 2010 г.
  35. ^ Гилбертсон, Скотт (26-04-2010), Google Chrome для поддержки формата открытых веб-шрифтов , webmonkey
  36. ^ Ошибка 38217 - [хром] Добавить поддержку WOFF , WebKit
  37. ^ Поддержка веб-спецификаций в Opera Presto 2.7 , Opera
  38. ^ Galineau, Сильвен (2010-04-23), Знакомства Уофф, Формат Standard Web Font , Microsoft
  39. ^ О Cufon
  40. ^ http://www.adobe.com/products/type/font-designers/thomas-phinney.html
  41. ↑ Томас Финни (13 октября 2010 г.) Рендеринг шрифтов в веб-браузерах: поиски шрифта
  42. ^ [1] цитируется по ссылке Финни Интернет-архив.

Внешние ссылки [ править ]

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