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

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

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

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

CSS1

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

  • семейство шрифтов
  • стиль шрифта
  • вариант шрифта
  • font-weight
  • размер шрифта

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

Веб-шрифты

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

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

С момента выпуска под Microsoft Основные шрифты для Интернета Программа, Arial, Georgia и Verdana стали де-факто тремя шрифтами Интернета.
Основная статья: Основные шрифты для Интернета

Чтобы у всех пользователей Интернета был базовый набор шрифтов, Microsoft начал Основные шрифты для Интернета инициатива 1996 г. (прекращена в 2002 г.). Выпущенные шрифты включают Arial, Новый Курьер, Times New Roman, Comic Sans, Влияние, Грузия, Требуше, Webdings и Вердана - под EULA что сделало их свободно распространяемыми, но также ограничило некоторые права на их использование. Их высокий уровень проникновения сделал их основным продуктом для веб-дизайнеров. Однако большинство Дистрибутивы Linux не включайте эти шрифты по умолчанию.

CSS2 попытался расширить инструменты, доступные веб-разработчикам, путем добавления синтеза шрифтов, улучшенного сопоставления шрифтов и возможности загрузки удаленных шрифтов.[3]

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

Резервные шрифты

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

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

семейство шрифтов: "Nimbus Sans L", Helvetica, Arial, без засечек;

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

Родовые семейства шрифтов

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

Без засечек

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

Засечки

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

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

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

Курсив

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

Фантазия

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

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

System-ui

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

ui-serif

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

ui-sans-serif

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

ui-monospace

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

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

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

Эмодзи

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

Математика

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

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

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

Веб-шрифты

История

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

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

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

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

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

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

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

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

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

TrueDoc

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

Встроенный OpenType

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

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

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

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

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

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] Гугл Хром 5+,[35][36]Опера Престо,[37]и поддерживается Internet Explorer 9 (с 14 марта 2011 г.).[38] Поддержка доступна в Mac OS X Lion's Сафари из выпуска 5.1.

Юникод шрифты

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

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

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

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

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

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

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

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

Пример CSS @шрифт настроить:

 @шрифт { 	семейство шрифтов: 'Журнал'; 		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') формат("истинный тип"), 		url('http://your-own.site/fonts/journal/journal.eot'), 		url('http://your-own.site/fonts/journal/journal.eot?#iefix') формат('встроенный-opentype'); 	font-weight: нормальный; 	стиль шрифта: нормальный; }

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

На практике имеет значение не только то, какой веб-браузер использует аудитория, но и то, как настроена их операционная система. В 2010 году шрифтовой дизайнер и консультант Томас Финни (вице-президент FontLab и ранее с Adobe[40]) написал пошаговый процесс поиска лучшего решения для рендеринга, которое - более или менее в шутку - использует большое количество перейти к заявления.[41] Более визуально ориентированный блок-схема был размещен в том же году на Типофил форум Miha Zajec.[42]

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

Заметки

  1. ^ Увидеть Гарнитуры с открытым исходным кодом и Бесплатное программное обеспечение шрифтов Unicode списки таких шрифтов.

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

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

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