Веб-типографика относится к использованию шрифтов во всемирной паутине . Когда 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 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-закругленный
- Шрифты по умолчанию в данной системе в закругленном стиле
- Шрифты с использованием эмодзи
Математика
- Шрифты для сложных математических формул и выражений.
Фангсонг ( китайский :仿宋 体)
- Китайские шрифты, которые находятся между шрифтами 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] Вместо этого Hoefler & Co. предлагает проприетарную систему доставки шрифтов, основанную на облаке. Многие другие производители коммерческих шрифтов занимаются распространением своих шрифтов, предлагая конкретную лицензию, известную как лицензия веб-шрифтов, которая разрешает использование программного обеспечения шрифтов для отображения контента в Интернете, что обычно запрещено базовыми лицензиями для настольных компьютеров. Естественно, это не мешает шрифтам и литейным целям под бесплатными лицензиями. [м 1]@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. [20] Другим препятствием было отсутствие открытого или бесплатного инструмента для создания веб-шрифтов в формате TrueDoc, тогда как Microsoft предоставила бесплатный инструмент для встраивания веб-шрифтов для создания веб-шрифтов в их формате.
Встроенный OpenType
Internet Explorer поддерживает встраивание шрифтов через собственный стандарт Embedded OpenType, начиная с версии 4.0. Он использует методы управления цифровыми правами , чтобы предотвратить копирование и использование шрифтов без лицензии. Упрощенное подмножество EOT было формализовано под названием CWT ( Compatibility Web Type , ранее EOT-Lite ) [21]
Масштабируемая векторная графика
Веб-типографика применима к SVG двумя способами:
- Все версии спецификации SVG 1.1, включая подмножество SVGT , определяют модуль шрифтов, позволяющий создавать шрифты в документе SVG. Safari представила поддержку многих из этих свойств в версии 3. Opera добавила предварительную поддержку в версии 8.0 с поддержкой большего количества свойств в 9.0.
- Спецификация 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 (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.
Юникод шрифты
Только два шрифта, доступные по умолчанию на платформе 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 { семейство шрифтов : 'Журнал' ; 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 ' ); шрифт : нормальный ; стиль шрифта : нормальный ; }
Практические соображения
На практике имеет значение не только то, какой веб-браузер использует аудитория, но и то, как настроена их операционная система. В 2010 году дизайнер шрифтов и консультант Томас Финни (вице-президент FontLab, ранее работавший в Adobe [40] ) написал пошаговый процесс поиска лучшего решения для рендеринга, которое - более или менее в шутку - использует большое количество команд goto. заявления. [41] Более наглядная блок-схема была опубликована в том же году на форуме Typophile Михаилом Заец. [42]
Смотрите также
- Масштабируемая замена вспышки Inman
- Список RFC, упомянутых в WOFF (проект от 23.10.2009):
- RFC 1950 Спецификация формата сжатых данных ZLIB
- RFC 2119 Ключевые слова для использования в RFC для обозначения уровней требований
- RFC 4647 Сопоставление языковых тегов
Заметки
- ^ См.Списки гарнитур шрифтов с открытым исходным кодом и бесплатных программ Unicode для таких шрифтов.
Рекомендации
- ^ Garaffa, Дэйв (2 сентября 1997). «Встроенные шрифты в Microsoft IE4pr2» . Internet.com . Архивировано из оригинала 8 июля 1998 года.
- ^ Каскадные таблицы стилей, уровень 1 , W3C, 1996-12-17
- ^ "Шрифты" , каскадные таблицы стилей, уровень 2: CSS2 Спецификация , World Wide Web Consortium , 1998-05-12 , извлекаться 2009-07-28
- ^ CSS2.1 Изменения -C.2.97 Глава 15 Шрифты , World Wide Web Consortium , извлекаться 2010-01-30
- ^ Модуль CSS3: Web Fonts , World Wide Web Consortium , получено 30 января 2010 г.
- ^ а б «Спецификация CSS2» , Шрифты , Консорциум World Wide Web
- ^ Пул, Алекс (2005-04-07). «Что более разборчиво: гарнитуры с засечками или без засечек?» . Архивировано 22 июля 2017 года . Проверено 27 сентября 2017 .
- ^ Хилл, Билл ( 21 июля 2008 г.), « Встраивание шрифтов в Интернете» , Microsoft
- ^ Комментарий команды W3C
- ^ Забытая монополия Microsoft
- ^ Веб-шрифты: взгляд из свободного мира
- ^ CSS @ Ten: следующая большая вещь
- ^ WOFF File Format 1.0 Запрос на отправку в W3C
- ^ Галино, Сильвен (23 апреля 2010 г.), Meet WOFF, Стандартный формат веб-шрифтов , Microsoft
- ^ Ссылочный код преобразования WOFF , получен 8 мая 2016 г.
- ^ «Новая база данных Google Fonts - рай для компьютерных фанатов» . Theverge.com . Проверено 24 августа +2016 .
- ^ Ричард Финк (2016-09-06) Webfonts on the Prairie , Alist Apart
- ^ Kimler, Скотт Томас (2009-07-04), Xbrowser шрифты - Расширьте Font Palette с помощью CSS3 , извлекаться 2010-02-05
- ^ Вуббен, Марк (27 февраля 2009 г.). «Geek Meet: веб-типографика и sIFR 3 - слайды 15 и 16» . SlideShare . Проверено 17 марта 2010 года .
- ^ Нидерст, Дженнифер (2001). В двух словах о веб-дизайне: краткий справочник для настольных компьютеров (2-е изд.). О'Рейли. п. 36 . ISBN 0-596-00196-7. Проверено 20 марта 2016 .
в каком году был разработан Truedoc.
- ^ Даггетт, Джон (31 июля 2009 г. ), EOT-Lite File Format v.1.1 , World Wide Web Consortium , получено 30 января 2010 г.
- ^ Миллс, Крис (4 декабря 2008 г.), Opera Presto 2.2 и Opera 10 - первый взгляд , Opera Software , получено 30 января 2010 г.
- ^ SVG в OpenType , W3C , получено 20 сентября 2014 г.
- ^ Красочная типографика в сети: приготовьтесь к разноцветным шрифтам , Pixel Ambacht , данные получены 20 сентября 2014 г.
- ^ Пример анимированного глифа , people.Mozilla , получено 20 сентября 2014 г.
- ^ Fonts , W3C , получено 20 сентября 2014 г.
- ^ Глава о шрифтах , W3C , получено 8 марта 2018 г.
- ^ Могу ли я использовать SVG шрифты , CanIuse , извлекаться 2014-09-20
- ^ SVGOpenTypeFonts , Mozilla , извлекаться 2014-09-20
- ^ Миллс, Крис (4 декабря 2008 г.), Opera Presto 2.2 и Opera 10 - первый взгляд , Сообщество разработчиков Opera , получено 29 января 2010 г.
- ^ Марсал, Кэти (7 февраля 2008 г.), Apple Safari 3.1 для поддержки загружаемых веб-шрифтов и др. , AppleInsider , получено 05 февраля 2010 г.
- ^ Ирландец, Пол (25 января 2010 г.), Chrome и @ font-face: Он здесь!
- ^ Галино, Сильвен (15.07.2010), Уголок CSS: Лучшая веб-типографика для лучшего дизайна , Microsoft
- ^ Шапиро, Мелисса (20 октября 2009 г.), Mozilla поддерживает формат открытых веб-шрифтов , Mozilla , получено 5 февраля 2010 г.
- ^ Гилбертсон, Скотт ( 26 апреля 2010 г. ), Google Chrome для поддержки формата открытых веб-шрифтов , webmonkey
- ^ Ошибка 38217 - [хром] Добавить поддержку WOFF , WebKit
- ^ Поддержка веб-спецификаций в Opera Presto 2.7 , Opera
- ^ Галино, Сильвен (23 апреля 2010 г.), Meet WOFF, Стандартный формат веб-шрифтов , Microsoft
- ^ О Cufon
- ^ http://www.adobe.com/products/type/font-designers/thomas-phinney.html
- ↑ Томас Финни (13 октября 2010 г.) Рендеринг шрифтов в веб-браузерах: поиски шрифта
- ^ [1], цитируется по ссылке Финни Интернет-архив.
Внешние ссылки
- Спецификация шрифтов CSS W3C
- Typoscan - это дизайнерский инструмент, который поможет вам сканировать типографику любого веб-сайта менее чем за секунду.