Веб-типографика
Веб-типографика , как и типографика в целом, — это дизайн страниц, их макет и выбор шрифта . В отличие от традиционной печатной типографики (где страница фиксируется после набора ), страницы, предназначенные для отображения во Всемирной паутине, имеют дополнительные технические проблемы и – учитывая возможность динамического изменения представления – дополнительные возможности. Ранние дизайны веб-страниц были очень простыми из-за технологических ограничений; В современном дизайне используются каскадные таблицы стилей (CSS), JavaScript и другие методы, позволяющие реализовать видение типографа и клиента.
Когда HTML был впервые создан, шрифты и стили контролировались исключительно настройками каждого веб-браузера . Не существовало механизма управления отображением шрифтов на отдельных веб-страницах, пока Netscape не представила fontэлемент в 1995 году, который затем был стандартизирован в спецификации HTML 3.2. Однако компьютерный шрифт , указанный fontЭлемент должен был быть установлен на компьютере пользователя, иначе запасной шрифт, например шрифт без засечек или моноширинный будет использоваться шрифт по умолчанию в браузере. Первая спецификация 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-familyfont-stylefont-variantfont-weightfont-size
Все шрифты идентифицировались исключительно по названию. Помимо упомянутых выше свойств, у дизайнеров не было возможности стилизовать шрифты, и не существовало механизма выбора шрифтов, отсутствующих в клиентской системе.
Веб-безопасные шрифты [ править ]
Веб-безопасные шрифты — это компьютерные шрифты , которые, как можно разумно ожидать, будут присутствовать в широком спектре компьютерных систем и используются авторами веб- контента для повышения вероятности отображения контента выбранным ими шрифтом. Если у посетителя веб-сайта нет указанного шрифта, его браузер пытается выбрать аналогичную альтернативу на основе указанных автором резервных шрифтов и общих семейств или использует замену шрифтов, определенную в операционной системе посетителя.
Основные шрифты Microsoft для Интернета [ править ]
Чтобы обеспечить всем пользователям Интернета базовый набор шрифтов, Microsoft запустила инициативу «Основные шрифты для Интернета» в 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 , без засечек ;
Шрифт, указанный первым, является предпочтительным. Если этот шрифт недоступен, веб-браузер пытается использовать следующий шрифт в списке. Если ни один из указанных шрифтов не найден, браузер отображает шрифт по умолчанию. Тот же процесс происходит для каждого символа, если браузер пытается отобразить символ, отсутствующий в указанном шрифте.
Общие семейства шрифтов [ править ]
Чтобы дать веб-дизайнерам некоторый контроль над внешним видом шрифтов на их веб-страницах, даже если указанные шрифты недоступны, спецификация CSS позволяет использовать несколько универсальных семейств шрифтов. Эти семейства предназначены для разделения шрифтов на несколько категорий в зависимости от их общего внешнего вида. Обычно они указываются последними в ряду резервных шрифтов, в качестве крайней меры в случае, если ни один из шрифтов, указанных автором, недоступен. В течение нескольких лет существовало пять родовых семейств: [6]
- Шрифты, буквы которых не имеют декоративных надписей или засечек. Эти шрифты часто считаются более удобными для чтения на экранах. [7]
- Шрифты, на символах которых имеются декоративные маркировки или засечки. Эти шрифты традиционно используются в печатных книгах.
- Шрифты, в которых все символы одинаковой ширины.
- Шрифты, напоминающие скоропись. Эти шрифты могут иметь декоративный вид, но при небольших размерах их трудно читать, поэтому обычно их используют экономно.
- Шрифты, которые могут содержать символы или другие декоративные свойства, но при этом представляют указанный символ.
рабочий вариант 4, с меньшей браузеров поддержкой CSS-шрифты ,
По состоянию на февраль 2024 г. [update]Рабочая группа CSS W3C используя предлагает системам указывать шрифт по умолчанию, ui теги; [8] на тот же день они еще не получили широкой поддержки. [9]
- Системный интерфейс
- Шрифты по умолчанию в данной системе: цель этой опции — позволить веб-контенту интегрироваться с внешним видом собственной ОС.
- с засечками
- Шрифты по умолчанию в данной системе в стиле с засечками.
- пользовательский интерфейс без засечек
- Шрифты по умолчанию в данной системе в стиле без засечек.
- UI-моноширинный
- Шрифты по умолчанию в данной системе в моноширинном стиле.
- UI-закругленный
- Шрифты по умолчанию в данной системе имеют закругленный стиль.
- Emoji
- Шрифты с использованием эмодзи
- Математика
- Шрифты для сложных математических формул и выражений.
- Фансонг ( китайский : 宋体 )
- Китайские шрифты, находящиеся между засечками Song и курсивом Kai. Этот стиль часто используется для правительственных документов.
Веб-шрифты [ править ]
История [ править ]
Метод обращения к удаленным шрифтам и их автоматической загрузки был впервые указан в спецификации CSS2, которая представила @font-faceпостроить. В то время получение файлов шрифтов из Интернета было спорным, поскольку шрифты, предназначенные для использования только на определенных веб-страницах, также могли быть загружены и установлены с нарушением лицензии на шрифты. [10]
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 @font-face техника встраивания [20] можно встраивать шрифты, чтобы они работали с IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ и Chrome 4.0+. Это позволяет подавляющему большинству пользователей Интернета получить доступ к этой функции. Некоторые коммерческие литейные предприятия возражают против распространения своих шрифтов. Например, компания Hoefler & Frere-Jones заявляет, что, хотя они «...с энтузиазмом [поддерживают] появление более выразительной сети, в которой дизайнеры могут безопасно и надежно использовать высококачественные шрифты в Интернете», нынешняя поставка шрифтов с использованием @font-face литейный завод считает это «незаконным распространением» и не разрешается. [21] Вместо этого Hoefler & Co. предлагает собственную систему доставки шрифтов, основанную на облаке. Многие другие производители коммерческих шрифтов решают проблему перераспределения своих шрифтов, предлагая специальную лицензию, известную как лицензия на веб-шрифты, которая позволяет использовать программное обеспечение шрифтов для отображения контента в Интернете, что обычно запрещено базовыми лицензиями для настольных компьютеров. Естественно, это не мешает шрифтам и литейным заводам по свободным лицензиям. [м 1]
TrueDoc [ править ]
TrueDoc , хотя и не являлся спецификацией веб-шрифтов, был первым стандартом для встраивания шрифтов. Она была разработана литейной компанией Bitstream в 1994 году и стала изначально поддерживаться в Netscape Navigator 4 в 1996 году. Из-за ограничений лицензии на открытый исходный код, когда Netscape не могла выпустить исходный код Bitstream, встроенная поддержка этой технологии закончилась, когда Netscape Navigator 6 был выпущен. выпущенный. Был доступен плагин ActiveX для добавления поддержки TrueDoc в Internet Explorer , но этой технологии пришлось конкурировать со Microsoft от встроенными шрифтами OpenType , которые изначально поддерживались в их браузере Internet Explorer начиная с версии 4.0. [22] Еще одним препятствием было отсутствие открытого или бесплатного инструмента для создания веб-шрифтов в формате TrueDoc, тогда как Microsoft предоставила бесплатный инструмент для встраивания веб-шрифтов для создания веб-шрифтов в их формате.
Встроенный OpenType [ править ]
Internet Explorer поддерживает встраивание шрифтов через собственный стандарт Embedded OpenType, начиная с версии 4.0. Он использует методы управления цифровыми правами , чтобы предотвратить копирование и использование шрифтов без лицензии. Упрощенное подмножество EOT было формализовано под названием CWT ( тип веб-совместимости , ранее EOT-Lite ). [23]
векторная графика Масштабируемая
Веб-типографика применима к SVG двумя способами:
- Все версии спецификации SVG 1.1, включая подмножество SVGT , определяют модуль шрифтов, позволяющий создавать шрифты в документе SVG. Safari представил поддержку многих из этих свойств в версии 3. Opera добавила предварительную поддержку в версии 8.0, а в версии 9.0 появилась поддержка большего количества свойств.
- Спецификация SVG позволяет применять CSS к документам SVG аналогично документам HTML.
@font-faceправило можно применять к тексту в документах SVG. Opera добавила поддержку этого в версии 10. [24] и WebKit, начиная с версии 325, также поддерживает этот метод, используя только шрифты SVG .
Масштабируемые векторные графические шрифты [ править ]
Шрифты 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) поддерживается Мозилла Фаерфокс 3.5+, Опера 10+, [32] Сафари 3.1+, [33] и Google Chrome 4.0+. [34] Internet Explorer 9+ поддерживает только те шрифты, для которых установлены разрешения на встраивание. [35]
Формат веб-открытого шрифта [ править ]
Формат веб-открытых шрифтов (WOFF) по сути представляет собой OpenType или TrueType со сжатием и дополнительными метаданными. WOFF поддерживается Mozilla Firefox 3.6+, [36] Гугл Хром 5+, [37] [38] Опера Престо , [39] и поддерживается Internet Explorer 9 (с 14 марта 2011 г.). [40] Поддержка доступна в Mac OS X Lion's Safari начиная с версии 5.1.
Шрифты Юникода [ править ]
Термин «шрифт Unicode» — это компьютерный шрифт , который сопоставляет глифы с кодовыми точками , определенными в стандарте Unicode . [41] Этот термин стал излишним, поскольку подавляющее большинство современных компьютерных шрифтов используют сопоставления Unicode, даже те шрифты, которые включают только глифы для одной системы письма или даже поддерживают только базовый латинский алфавит . Шрифты, которые поддерживают широкий спектр сценариев Юникода и символов Юникода , иногда называют «шрифтами пан-Юникода», хотя максимальное количество глифов, которые можно определить в шрифте TrueType , ограничено 65 535, это невозможно для один шрифт для предоставления отдельных глифов для всех определенных символов Юникода (149 813 символов в Юникоде 15.1).
Только два шрифта, доступные по умолчанию на платформе Windows , Microsoft Sans Serif и Lucida Sans Unicode , обеспечивают широкий Юникода . набор символов [ нужно обновить ]
На бесплатных программных платформах с открытым исходным кодом, таких как Linux , GNU Unifont и GNU FreeFont предоставляют широкий спектр символов. В ChromeOS Google шрифты Noto поддерживают (или планируется поддерживать) все скрипты , закодированные в стандарте Unicode.
Альтернативы [ править ]
Распространенной проблемой в веб-дизайне является создание макетов, содержащих шрифты, небезопасные для Интернета. Для подобных ситуаций существует ряд решений. Одним из распространенных решений является замена текста аналогичным веб-безопасным шрифтом или использование серии похожих резервных шрифтов.
Другой метод — замена изображения . Эта практика предполагает наложение текста на изображение, содержащее тот же текст, написанный нужным шрифтом. Это хорошо с эстетической точки зрения, но препятствует выделению текста, увеличивает использование полосы пропускания, плохо влияет на поисковую оптимизацию и делает текст недоступным для пользователей с ограниченными возможностями. [ нужна цитата ]
Раньше решения на основе Flash , такие как sIFR использовались . Это похоже на методы замены изображений, хотя текст можно выбрать и отобразить как вектор. Однако этот метод требует наличия в системе клиента собственного плагина.
Другое решение — использовать JavaScript для замены текста на VML (для Internet Explorer) или SVG (для всех остальных браузеров). [42]
См. также [ править ]
Примечания [ править ]
- ^ См. такие шрифты в списках шрифтов с открытым исходным кодом и в списках шрифтов Unicode для бесплатного программного обеспечения.
Ссылки [ править ]
- ^ Гараффа, Дэйв (2 сентября 1997 г.). «Встроенные шрифты в Microsoft IE4pr2» . Интернет.com . Архивировано из оригинала 8 июля 1998 года.
- ^ Каскадные таблицы стилей, уровень 1 , W3C, 17 декабря 1996 г.
- ^ «Шрифты» , Каскадные таблицы стилей, уровень 2: Спецификация CSS2 , Консорциум World Wide Web , 12 мая 1998 г. , получено 28 июля 2009 г.
- ^ Изменения CSS2.1 — C.2.97 Глава 15 Шрифты , Консорциум World Wide Web , получено 30 января 2010 г.
- ^ Модуль CSS3: Веб-шрифты , Консорциум World Wide Web , получено 30 января 2010 г.
- ^ Перейти обратно: а б «Спецификация CSS2» , Шрифты , Консорциум World Wide Web
- ^ Пул, Алекс (7 апреля 2005 г.). «Какие шрифты более разборчивы: шрифты с засечками или без засечек?» . Архивировано из оригинала 22 июля 2017 г. Проверено 27 сентября 2017 г.
- ^ Рабочая группа CSS (1 февраля 2024 г.). «Модуль CSS-шрифтов, уровень 4» .
- ^ «Значения Ui-serif, ui-sans-serif, ui-monospace и ui-rounded для семейства шрифтов | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.» .
- ^ Хилл, Билл (21 июля 2008 г.), Встраивание шрифтов в Интернет , Microsoft, заархивировано из оригинала 6 сентября 2015 г.
- ^ Комментарий команды W3C
- ^ Забытая монополия Microsoft
- ^ Веб-шрифты: взгляд из свободного мира
- ^ CSS @ Ten: Следующая большая вещь
- ^ Формат файла WOFF 1.0 Запрос на отправку в W3C
- ^ Галино, Сильвен (23 апреля 2010 г.), Знакомьтесь, WOFF, стандартный формат веб-шрифтов , Microsoft
- ^ Справочный код преобразования WOFF , получено 8 мая 2016 г.
- ^ «Новая база данных Google Fonts — рай для дизайнеров» . Theverge.com . Проверено 24 августа 2016 г.
- ^ Ричард Финк (06.09.2016) Webfonts on the Prairie , Alist Apart
- ^ Кимлер, Скотт Томас (04 июля 2009 г.), Шрифты xBrowser — расширьте палитру шрифтов с помощью CSS3 , получено 5 февраля 2010 г.
- ^ Вуббен, Марк (27 февраля 2009 г.). «Встреча с компьютерщиками: веб-типографика и sIFR 3 — слайды 15 и 16» . СлайдПоделиться . Проверено 17 марта 2010 г.
- ^ Нидерст, Дженнифер (2001). Коротко о веб-дизайне: краткий справочник по настольным компьютерам (2-е изд.). О'Рейли. п. 36 . ISBN 0-596-00196-7 . Проверено 20 марта 2016 г.
в каком году был разработан truedoc.
- ^ Даггетт, Джон (31 июля 2009 г.), Формат файла EOT-Lite v.1.1 , Консорциум World Wide Web , получено 30 января 2010 г.
- ^ Миллс, Крис (04 декабря 2008 г.), Opera Presto 2.2 и Opera 10 — первый взгляд , Opera Software , получено 30 января 2010 г.
- ^ SVG в OpenType , W3C , получено 20 сентября 2014 г.
- ^ Красочная типографика в сети: будьте готовы к многоцветным шрифтам , Pixel Ambacht , получено 20 сентября 2014 г.
- ^ Пример анимированного глифа , People.Mozilla , получено 20 сентября 2014 г.
- ^ Шрифты , W3C , получено 20 сентября 2014 г.
- ^ Глава о шрифтах , W3C , получено 8 марта 2018 г.
- ^ Могу ли я использовать шрифты SVG , CanIuse , получено 20 сентября 2014 г.
- ^ SVGOpenTypeFonts , Mozilla , получено 20 сентября 2014 г.
- ^ Миллс, Крис (04 декабря 2008 г.), Opera Presto 2.2 и Opera 10 — первый взгляд , Сообщество разработчиков Opera , получено 29 января 2010 г.
- ^ Марсал, Кэти (07 февраля 2008 г.), Apple Safari 3.1 поддерживает загружаемые веб-шрифты, подробнее , AppleInsider , получено 5 февраля 2010 г.
- ^ Айриш, Пол (25 января 2010 г.), Chrome и @font-face: Оно здесь!
- ^ Галино, Сильвен (15 июля 2010 г.), Уголок CSS: лучшая веб-типографика для лучшего дизайна , Microsoft
- ^ Шапиро, Мелисса (20 октября 2009 г.), Mozilla поддерживает формат открытых веб-шрифтов , Mozilla , получено 5 февраля 2010 г.
- ^ Гилбертсон, Скотт (26 апреля 2010 г.), Google Chrome будет поддерживать формат открытых веб-шрифтов , webmonkey
- ^ Ошибка 38217 — [хром] Добавление поддержки WOFF , WebKit
- ^ Поддержка веб-спецификаций в Opera Presto 2.7 , Opera
- ^ Галино, Сильвен (23 апреля 2010 г.), Знакомьтесь, WOFF, стандартный формат веб-шрифтов , Microsoft
- ^ «Шрифты и клавиатуры» . Консорциум Юникод. 28 июня 2017 года. Архивировано из оригинала 18 октября 2019 года . Проверено 13 октября 2019 г.
- ^ О Куфоне
Внешние ссылки [ править ]
СМИ из Commons 
Ресурсы из Викиверситета 
Данные из Викиданных 
Документация из MediaWiki
- Спецификация CSS-шрифтов W3C
- Список RFC, упомянутый в WOFF (проект от 23 октября 2009 г.):
| Страница | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Параграф | |||||||||||
| Характер |
| ||||||||||
| Гарнитура классификации |
| ||||||||||
| Пунктуация | |||||||||||
| верстка | |||||||||||
| Типографские единицы | |||||||||||
| Цифровая типографика | |||||||||||
| Типографика в другом системы письма | |||||||||||
| Статьи по Теме | |||||||||||
| Связанные таблицы | |||||||||||
