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

Веб-типографика , как и типографика в целом, представляет собой дизайн страниц — их макет и выбор шрифта . В отличие от традиционной типографики на основе печати (где страница фиксируется после набора ), страницы, предназначенные для отображения во Всемирной паутине, имеют дополнительные технические проблемы и — учитывая их способность динамически изменять представление — дополнительные возможности. Ранние дизайны веб-страниц были очень простыми из-за технологических ограничений; современные дизайны используют каскадные таблицы стилей (CSS), JavaScript и другие методы для передачи видения типографа и клиента.

Когда HTML был впервые создан, гарнитуры шрифтов и стили контролировались исключительно настройками каждого веб-браузера . Не существовало механизма для отдельных веб-страниц, чтобы контролировать отображение шрифтов, пока Netscape не представил fontэлемент в 1995 году, который затем был стандартизирован в спецификации HTML 3.2. Однако компьютерный шрифт, указанный элементом font, должен был быть установлен на компьютере пользователя, или использовался бы резервный шрифт, такой как шрифт браузера по умолчанию sans-serif или monospace . Первая спецификация CSS была опубликована в 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 for the Web шрифты Arial, Georgia и Verdana стали фактически тремя веб-шрифтами.

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

По состоянию на февраль 2024 года рабочая группа CSS W3C[обновлять] предлагает системам указывать шрифт по умолчанию с помощью тегов; [8] по состоянию на ту же дату они еще не получили широкой поддержки. [9]ui

  • Система-ui
    Шрифты по умолчанию в данной системе: цель этой опции — обеспечить интеграцию веб-контента с внешним видом и функционированием собственной ОС.
  • ui-serif
    Шрифты по умолчанию в данной системе в стиле serif
  • ui-sans-serif
    Шрифты по умолчанию в данной системе в стиле sans-serif
  • ui-моноширинный
    Шрифты по умолчанию в данной системе в моноширинном стиле
  • ui-округленный
    Шрифты по умолчанию в данной системе в округленном стиле
  • Эмодзи
    Шрифты с использованием эмодзи
  • Математика
    Шрифты для сложных математических формул и выражений.
  • Фансонг ( китайский :仿宋体)
    • Китайские шрифты, которые находятся между засечками Song и курсивом Kai. Этот стиль часто используется для правительственных документов.

Веб-шрифты

История

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

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

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

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

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

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

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

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

TrueDoc

TrueDoc , хотя и не является спецификацией веб-шрифтов, был первым стандартом для встраивания шрифтов. Он был разработан компанией Bitstream в 1994 году и стал изначально поддерживаться в Netscape Navigator 4 в 1996 году. Из-за ограничений лицензии на открытый исходный код, поскольку Netscape не могла выпустить исходный код Bitstream, собственная поддержка технологии закончилась, когда был выпущен Netscape Navigator 6. Был доступен плагин ActiveX для добавления поддержки TrueDoc в Internet Explorer , но технология должна была конкурировать со шрифтами Embedded OpenType от Microsoft , которые изначально поддерживались в их браузере Internet Explorer с версии 4.0. [22] Другим препятствием было отсутствие открытого или бесплатного инструмента для создания веб-шрифтов в формате TrueDoc, тогда как Microsoft предоставила бесплатный инструмент Web Embedding Fonts Tool для создания веб-шрифтов в своем формате.

Встроенный OpenType

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

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

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

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

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

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

TrueType/OpenType

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

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

Формат Web Open Font Format (WOFF) по сути является OpenType или TrueType со сжатием и дополнительными метаданными. WOFF поддерживается Mozilla Firefox 3.6+, [36] Google Chrome 5+, [37] [38] Opera Presto , [39] и поддерживается Internet Explorer 9 (с 14 марта 2011 г.). [40] Поддержка доступна в Safari для Mac OS X Lion с версии 5.1.

Шрифты Unicode

Термин шрифт Unicode — это компьютерный шрифт , который сопоставляет глифы с кодовыми точками , определенными в стандарте Unicode . [41] Этот термин стал излишним, поскольку подавляющее большинство современных компьютерных шрифтов используют сопоставления Unicode, даже те шрифты, которые включают глифы только для одной системы письма или даже поддерживают только базовый латинский алфавит . Шрифты, которые поддерживают широкий спектр сценариев Unicode и символов Unicode , иногда называют «шрифтами pan-Unicode», хотя, поскольку максимальное количество глифов, которое может быть определено в шрифте TrueType, ограничено 65 535, невозможно, чтобы один шрифт предоставлял отдельные глифы для всех определенных символов Unicode (154 998 символов с Unicode 16.0).

Только два шрифта, доступные по умолчанию на платформе Windows , Microsoft Sans Serif и Lucida Sans Unicode , предоставляют широкий репертуар символов Unicode . [ требуется обновление ]

На свободных и открытых программных платформах, таких как Linux , GNU Unifont и GNU FreeFont предоставляют широкий спектр символов. На ChromeOS шрифты Noto от Google поддерживают (или планируется поддерживать) все скрипты, закодированные в стандарте Unicode

Альтернативы

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

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

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

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

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

Примечания

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

Ссылки

  1. ^ Гараффа, Дэйв (2 сентября 1997 г.). "Встроенные шрифты в Microsoft IE4pr2". Internet.com . Архивировано из оригинала 8 июля 1998 г.
  2. ^ Каскадные таблицы стилей, уровень 1, W3C, 1996-12-17
  3. ^ "Шрифты", каскадные таблицы стилей, уровень 2: спецификация CSS2 , World Wide Web Consortium , 1998-05-12 , получено 2009-07-28
  4. ^ Изменения CSS2.1 —C.2.97 Глава 15 Шрифты, Консорциум Всемирной паутины , получено 30.01.2010
  5. ^ Модуль CSS3: Веб-шрифты, Консорциум Всемирной паутины , получено 30.01.2010
  6. ^ ab "Спецификация CSS2", Шрифты , Консорциум Всемирной паутины
  7. ^ Пул, Алекс (2005-04-07). «Какие шрифты более разборчивы: с засечками или без засечек?». Архивировано из оригинала 2017-07-22 . Получено 2017-09-27 .
  8. ^ Рабочая группа CSS (1 февраля 2024 г.). «Модуль шрифтов CSS, уровень 4».
  9. ^ «Значения ui-serif, ui-sans-serif, ui-monospace и ui-rounded для семейства шрифтов | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.».
  10. ↑ Хилл, Билл (21.07.2008), Внедрение шрифтов в Интернет, Microsoft, архивировано из оригинала 06.09.2015
  11. ^ Комментарий команды W3C
  12. ^ Забытая монополия Microsoft
  13. ^ Веб-шрифты: взгляд из свободного мира
  14. ^ CSS @ Ten: Следующее большое событие
  15. ^ Запрос на отправку файла формата WOFF 1.0 в W3C
  16. ^ Галино, Сильвен (2010-04-23), Знакомьтесь с WOFF, стандартным форматом веб-шрифтов, Microsoft
  17. ^ Справочный код преобразования WOFF , получен 8 мая 2016 г.
  18. ^ "Новая база данных Google Fonts — рай для гиков-дизайнеров". Theverge.com . Получено 24 августа 2016 г. .
  19. ^ Ричард Финк (2016-09-06) Веб-шрифты в прерии, Alist Apart
  20. ^ Кимлер, Скотт Томас (2009-07-04), Шрифты xBrowser — Расширьте палитру шрифтов с помощью CSS3 , получено 2010-02-05
  21. ^ Wubben, Mark (27 февраля 2009 г.). "Geek Meet: Web Typography and sIFR 3 - Slide 15 and 16". SlideShare . Получено 17 марта 2010 г. .
  22. ^ Нидерст, Дженнифер (2001). Веб-дизайн в двух словах: краткий справочник по настольному компьютеру (2-е изд.). O'Reilly. стр. 36. ISBN 0-596-00196-7. Получено 20 марта 2016 г. . в каком году был разработан truedoc.
  23. ↑ Даггетт, Джон (31.07.2009), Формат файла EOT-Lite v.1.1, Консорциум World Wide Web , получено 30.01.2010
  24. ↑ Миллс, Крис (2008-12-04), Opera Presto 2.2 и Opera 10 — первый взгляд, Opera Software , получено 2010-01-30
  25. ^ SVG в OpenType, W3C , получено 20 сентября 2014 г.
  26. ^ Красочная типографика в Интернете: будьте готовы к многоцветным шрифтам, Pixel Ambacht , получено 20 сентября 2014 г.
  27. ^ Пример анимированного глифа, people.Mozilla , получено 20 сентября 2014 г.
  28. ^ Шрифты, W3C , получено 20 сентября 2014 г.
  29. ^ Глава «Шрифты», W3C , получено 08.03.2018
  30. ^ Могу ли я использовать шрифты SVG, CanIuse , получено 20 сентября 2014 г.
  31. ^ SVGOpenTypeFonts, Mozilla , получено 20 сентября 2014 г.
  32. ↑ Миллс, Крис (2008-12-04), Opera Presto 2.2 и Opera 10 — первый взгляд, Сообщество разработчиков Opera , получено 29-01-2010
  33. ^ Марсал, Кэти (2008-02-07), Safari 3.1 от Apple будет поддерживать загружаемые веб-шрифты, подробнее, AppleInsider , получено 2010-02-05
  34. ^ Айриш, Пол (25.01.2010), Chrome и @font-face: Он здесь!
  35. ^ Галино, Сильвен (2010-07-15), Уголок CSS: Лучшая веб-типографика для лучшего дизайна, Microsoft
  36. ^ Шапиро, Мелисса (2009-10-20), Mozilla Supports Web Open Font Format, Mozilla , получено 2010-02-05
  37. ^ Гилбертсон, Скотт (2010-04-26), Google Chrome будет поддерживать формат Web Open Font, webmonkey
  38. ^ Ошибка 38217 - [chromium] Добавить поддержку WOFF, WebKit
  39. ^ Поддержка веб-спецификации в Opera Presto 2.7, Opera
  40. ^ Галино, Сильвен (2010-04-23), Знакомьтесь с WOFF, стандартным форматом веб-шрифтов, Microsoft
  41. ^ "Шрифты и клавиатуры". Unicode Consortium. 28 июня 2017 г. Архивировано из оригинала 18 октября 2019 г. Получено 13 октября 2019 г.
  42. ^ О Куфоне
  • Спецификация шрифтов W3C CSS
  • Список RFC, упомянутых в WOFF (черновик от 23.10.2009):
    • Спецификация формата сжатых данных RFC 1950 ZLIB
    • RFC 2119 Ключевые слова для использования в RFC для указания уровней требований
    • RFC 4647 Сопоставление языковых тегов
Взято с "https://en.wikipedia.org/w/index.php?title=Web_typography&oldid=1217185073#Web_fonts"