Правило @ Font-Face и полезные хитрости веб-шрифтов

  1. Дальнейшее чтение на SmashingMag:
  2. TrueType
  3. OpenType
  4. СРВ
  5. Уофф
  6. SVG
  7. @ font-face Revolution
  8. @ font-face в конце 1990-х
  9. Успешный второй прогон благодаря субпиксельному рендерингу
  10. Проблемы шрифтовых литейных заводов
  11. Использование генератора @font face Kit
  12. Рендеринг и прочие параметры
  13. Настройки CSS
  14. Пример кода
  15. Время загрузки увеличивается с количеством шрифтов
  16. Странное временное решение в Firefox
  17. Встраивание веб-шрифтов с вашего сервера
  18. Шрифты на выбор и шрифты, которых следует избегать
  19. Встраивание бесплатных и открытых шрифтов
  20. Советы, хитрости и обходные пути
  21. Макет текста
  22. Особенности оформления OpenType

Возможность встраивания любого шрифта, который вам нравится, в веб-сайты через @ font-face - это дополнительное стилистическое устройство, которое обещает устранить монотонность обычных системных шрифтов. Конечно, было бы слишком легко, если бы там был только один формат веб-шрифтов. Вместо этого, как вы узнаете в этой статье, есть множество вариантов. «Возможности OpenType»)] ( https://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/ ) Это краткое введение в @ font-face приведет вас к руководству по генератору @ font-face kit. Если вы хотите использовать в Интернете ваши уже лицензированные настольные шрифты, прочитайте о том, как встраивать их с вашего собственного сервера. Эта статья, дополненная некоторыми полезными советами, хитростями и обходными путями, даст полезные советы.

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

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

Дальнейшее чтение на SmashingMag:

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, и этот список можно продолжить. Найти дорогу в этих настоящих джунглях форматов шрифтов не совсем просто. Давайте подробнее рассмотрим плюсы и минусы форматов шрифтов, которые особенно актуальны для их использования на веб-сайтах.

TrueType

Этот формат был разработан в конце 1980-х годов в качестве конкурента шрифтов Adobe Type 1, используемых в PostScript. В качестве масштабируемого формата структуры он заменил обычные растровые шрифты, которые использовались для отображения на экране в то время. Microsoft также приняла формат TrueType, и вскоре она превратилась в стандартный формат для системных шрифтов благодаря тому, что она предложила точную настройку для точного отображения шрифта в определенных размерах.

OpenType

Microsoft и Adobe объединились в разработке этого формата шрифта. Основанный на формате TrueType, OpenType предлагает дополнительные типографские функции, такие как лигатуры, дроби или контекстно-зависимые глифы и тому подобное. Тем не менее, поддержка браузером этих функций, которые распространены в сложных программах верстки и иллюстрации, все еще неудовлетворительна. Существуют две разные версии шрифтов OpenType, в зависимости от используемой технологии структуры. Есть:

  • OpenType шрифты с TrueType Outlines (OpenType TT) и
  • Шрифты OpenType с контурами PostScript (OpenType PS)

OpenType поставляется в двух разных версиях
OpenType поставляется в двух разных версиях.

OpenType PS - это так называемый формат файла на основе CFF (CFF = компактный формат файла). Это актуально при использовании шрифтов OpenType PS в качестве веб-шрифтов, поскольку форматы на основе PostScript отображаются без субпиксельного рендеринга на платформах Windows, что значительно влияет на качество рендеринга. Вот почему шрифты на основе TrueType являются лучшим выбором в качестве веб-шрифтов, хотя Microsoft решит эту проблему в будущем. Структуры шрифтов TrueType и OpenType очень похожи, и поддержка браузеров доступна в Safari 3.1 и более поздних версиях, Firefox 3.5 и Opera 10 (и, конечно, в более новых версиях).

СРВ

Internet Explorer поддерживает запатентованный стандарт Embedded OpenType (EOT) с конца 1990-х годов. Это разновидность форматов TrueType и OpenType, которые обеспечивают следующие особенности:

  • Шрифты EOT - это компактная форма OpenType, оптимизированная для быстрой доставки в Интернете благодаря сжатию данных.
  • Посредством URL-привязки шрифты EOT можно привязать к конкретному домену. Шрифты могут быть доставлены и использованы только на этих веб-страницах. Этот метод помогает предотвратить копирование и использование шрифтов без лицензии.

EOT поддерживается исключительно Internet Explorer. Несмотря на то, что в будущем он может не сработать как формат веб-шрифтов, все же имеет смысл использовать этот формат сегодня, чтобы предоставлять пользователям различных версий IE веб-шрифты. Текущие версии IE (<9) не используют какой-либо другой формат.

Если вы хотите конвертировать шрифты TTF в сжатые файлы EOT, вы можете использовать EOTFAST (бесплатное приложение) в настоящее время доступно только для Windows.

Уофф

В отличие от EOT, формат открытых веб-шрифтов (WOFF) находится в процессе стандартизации в качестве рекомендации W3C, которая опубликовала WOFF в качестве рабочего проекта еще в июле 2010 года.

WOFF возник как своего рода компромисс между литейными производителями шрифтов и компаниями-браузерами, поэтому неудивительно, что WOFF был разработан двумя дизайнерами шрифтов (Erik van Blokland и Tal Leming) в сотрудничестве с разработчиком Mozilla Джонатаном Кью. По сути, WOFF - это оболочка, которая содержит шрифты TrueType и OpenType, и на самом деле это не новый собственный формат.

В WOFF используется интегрированный алгоритм сжатия с именем zlib , который обеспечивает уменьшение размера файлов для шрифтов TrueType, превышающее 40%. Кроме того, могут быть добавлены метаданные, например, лицензия пользователя. Однако эти данные представляют только метаинформацию и не проверяются браузерами.

Благодаря WOFF Mozilla может использовать свою фирменную гарнитуру FF Meta
Благодаря WOFF Mozilla может использовать свою фирменную гарнитуру FF Meta.

Формат поддерживается Firefox начиная с версии 3.6, а Google Chrome - с версии 5.0. Все остальные производители браузеров работают над добавлением полной поддержки в будущих выпусках. Шрифты могут быть преобразованы в формат WOFF онлайн-сервисом. Шрифт Белка бесплатно.

SVG

Шрифты SVG - это текстовые файлы, которые содержат контуры глифов, представленные в виде стандартных элементов и атрибутов SVG, как если бы они были отдельными векторными объектами в изображении SVG. Но это также один из самых больших недостатков шрифтов SVG. В то время как EOT, WOFF и PostScript со вкусом OpenType имеют сжатие, встроенное в формат шрифта - SVG-шрифты всегда несжатые и обычно довольно большие.

Шрифты SVG на самом деле не являются альтернативой другим форматам веб-шрифтов, и iOS 4.2 является первой версией Mobile Safari для поддержка родных веб-шрифтов (в формате TrueType) вместо SVG. Тем не менее, SVG является единственным форматом, который можно использовать для iPhone и iPad до iOS 4.2.

Инструменты, такие как Шрифт Белка , может быть использован для преобразования шрифтов в этот формат. Еще одна возможность получить SVG-шрифты - взять их напрокат у одного из многочисленных поставщиков веб-шрифтов.

Typekit также обслуживает свои шрифты в виде файлов SVG для iPhone и iPad
Typekit также обслуживает свои шрифты в виде файлов SVG для iPhone и iPad. Typekit больше не обслуживает SVG-шрифты для устройств iOS , Сервис обслуживает шрифты TrueType для устройств iOS 4.2 и выше.

@ font-face Revolution

Свойство CSS3 @ font-face предоставляет так много новых возможностей, что веб-дизайнеры овладевают настоящим золотодобывающим менталитетом. Есть надежда, что обычные системные шрифты скоро будут отменены встраиванием веб-шрифтов, что позволяет нам выбирать практически любой шрифт и стиль шрифта, который они хотят - как в дизайне печати.

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

@ font-face в конце 1990-х

Возможность встраивать любой шрифт в веб-сайт существует уже давно. Netscape 4 и Internet Explorer 4 поддерживали @ font-face к концу 1990-х годов. Правило позволило нам разместить шрифт на сервере и доставить его через веб-страницу.

@ font-face {font-family: Gentium; src: url (fonts / gentium.eot); }

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

Неудивительно, что правило @ font-face было удалено из спецификации CSS 2.1. Использование системных шрифтов было обычной практикой в ​​веб-дизайне, особенно для копирования. Для заголовков, несколько обходных путей были установлены. Некоторые дизайнеры заменили текст растровым файлом или Flash-фильмом, в котором заголовок отображался определенным шрифтом.

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

Успешный второй прогон благодаря субпиксельному рендерингу

Внедрение Safari 3.1 компанией Apple стало поворотным моментом в использовании веб-шрифтов. Обновление браузера вернуло старое правило @ font-face. Значительным улучшением стало появление плоских ЖК-дисплеев с высоким разрешением экрана и сглаживанием с помощью субпиксельного рендеринга. Субпиксельная визуализация использует тот факт, что каждый пиксель на цветном ЖК-дисплее состоит из отдельных красных, зеленых и синих подпикселей. Он использует эти субпиксели для сглаживания текста, что увеличивает видимое разрешение ЖК-дисплея и, таким образом, улучшает рендеринг текста - даже текста, установленного на очень маленькие размеры.

На платформах Mac OS X эта функция активирована по умолчанию. В Windows используется собственный товарный знак ClearType, который активирован по умолчанию в Windows Vista и Windows 7, но отключен в Windows XP. В Microsoft Office 2007 и 2010, Internet Explorer 7+ и Windows Live Messenger ClearType включен по умолчанию, даже если он не включен во всей операционной системе.

Safari 3
Safari 3.1 впервые предложил поддержку стандартных форматов шрифтов ( демонстрация ).

Субпиксельный рендеринг отображается в Safari на Mac OS X. Что примечательно в поддержке @ font-face в Safari, так это то, что впервые встраивание стандартных форматов, а именно TrueType (TTF) и OpenType (TTF / OTF), возможно без предыдущее преобразование, как показано в следующем CSS:

@ font-face {font-family: Gentium; src: url (fonts / gentium.otf); }

Проблемы шрифтовых литейных заводов

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

Использование генератора @font face Kit

Для практического теста вы можете скачать пакет шрифтов по адресу Граублау без Сети , Этот пакет шрифтов предлагает шрифт OpenType на основе PostScript, который можно использовать в Safari 3.1+, Firefox 3.5+ и Opera 10+ без каких-либо изменений. Чтобы обеспечить поддержку браузера для Internet Explorer и улучшить отображение на экране, вы можете использовать @ font-face Kit Generator , Нажмите кнопку «Добавить шрифты» и загрузите соответствующий шрифт со всеми его весами. Затем выберите переключатель «Эксперт» и отметьте все необходимые параметры, которые мы рассмотрим более подробно сейчас:

Основная проблема заключается в том, что вам необходимо активировать EOT, чтобы получить поддержку @ font-face в Internet Explorer IE4 - IE8 (в IE9 RC также поддерживается WOFF). Шрифты SVG в основном будут нужны для Mobile Safari на iPhone и iPad до iOS 4.2, хотя Chrome и Opera также могут обрабатывать этот формат. В качестве альтернативы или, скорее, в дополнение к SVG, существует сжатая версия SVGZ, которая предлагает гораздо меньший размер файла. К сожалению, он не работает на iPhone, поэтому вам все равно понадобится SVG-шрифт.

Создание формата шрифта TrueType позволит поддерживать Safari (начиная с версии 3.1), Firefox (начиная с версии 3.5) и Opera (начиная с версии 10). Проверка опции WOFF не увеличит поддержку браузера в наши дни, но она обязательно произойдет в ближайшем будущем, когда WOFF станет стандартным форматом веб-шрифтов.

Рендеринг и прочие параметры

  • Добавить подсказку : эта опция предлагает улучшенное отображение шрифтов в Windows. Вам следует снять этот флажок, только если вы абсолютно уверены, что соответствующие шрифты уже оптимизированы для экрана.
  • WebOnly ™ добавляет специальные модификации, которые позволяют браузерам использовать измененные шрифты, но избегают установки этих шрифтов в распространенных операционных системах. Проверка этой опции помогает избежать непреднамеренных незаконных копий.
  • Сохранение OT-функций . Шрифты рабочего стола могут иметь ряд функций OpenType. Поскольку в настоящее время браузер не поддерживает эти функции, вы можете удалить их с помощью этой опции (рендеринг и прочие параметры). Чтобы сохранить некоторые стандартные, т.е. уже поддерживаемые функции OpenType, такие как лигатуры, вы можете активировать эту опцию.
  • Удалить кернинг . Другой возможностью уменьшить размер файла является установка этой опции, которая удалит все значения кернинга, содержащиеся для определенных буквенных комбинаций. В случае, если вы собираетесь использовать шрифт для основного текста, этот параметр настоятельно рекомендуется. Что касается заголовков, то с ними следует обращаться осторожно или вообще не делать, так как пропущенные значения кернинга могут привести к неприятному эффекту формы слов, похожих на швейцарский сыр.
  • Simplify Outlines делает именно это: он пытается упростить контур символов. Поскольку эта опция снижает качество отображения на экране, использовать ее не рекомендуется.
  • Build Cufón File не является частью параметров встраивания @ font-face. Для получения более подробной информации о создании файла вы также можете проверить Cufón Веб-сайт.

Подменю

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

Опция Basic Subsetting установлена ​​по умолчанию и предлагает обычное западноевропейское распределение глифов на основе набора символов MacRoman , Настраиваемое подмножество позволяет настраивать область действия содержащихся символов и глифов. Принимая во внимание, что опция No Subsetting полностью отключает поднаборы и преобразует шрифт со всеми содержащимися в нем символами и глифами.

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

Вы можете выбрать три разные версии:

Синтаксис Fontspring в настоящее время является наиболее простым и совместимым. Он может доставлять файл WOFF в IE9 и EOT в IE более ранней версии 9, а также работает на мобильных операционных системах, таких как iOS и Android.

Настройки CSS

Опция Связывание стилей группирует стили по семейству. Это позволяет использовать шрифты позже через свойства шрифта CSS и стиль шрифта.

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

Наконец, что не менее важно, опция Base64 Encode встраивает веб-шрифты с кодировкой base64 в код CSS вместо создания отдельного файла шрифтов. В результате шрифты не отображаются как файлы шрифтов в кэше браузера.

Пример кода

В следующем примере показано, как может выглядеть ваш CSS-код для встраивания @ font-face:

@ font-face {font-family: Graublauweb; src: url ('Graublauweb.eot'); / * Режимы совместимости IE9 * / src: url ('Graublauweb.eot?) Формат (' eot '), / * IE6-IE8 * / url (' Graublauweb.woff ') формат (' woff '), / * Modern Формат браузеров * / url ('Graublauweb.ttf') ('trueetype'), / * Safari, Android, iOS * / url ('Graublauweb.svg # svgGraublauweb') («svg»); / * Legacy iOS * /}

Первое утверждение для IE9 в режимах рендеринга IE7 и IE8. Во втором объявлении источника файл EOT для Internet Explorer объявляется первым в этом списке через запятую, а за именем следует знак вопроса. Это вводит IE в заблуждение, что остальная часть строки является строкой запроса и загружает только файл EOT.

Другие браузеры следуют спецификации и выбирают нужный формат на основе каскада src и подсказки формата. Спецификация SVG содержит дополнительный хэш-тег в качестве уникального идентификационного номера. Это необходимо, поскольку файлы SVG могут содержать несколько шрифтов. Однако генератор Fontsquirrel @ font-face позаботится об идентификационном номере и его внедрении в код CSS автоматически.

Обратите внимание, что синтаксис, предложенный Итаном Данхэмом в его статье Новый пуленепробиваемый @ Font-Face синтаксис и исправлено Ричардом Финком в статье о новом @ Font-Face синтаксисе: проще, проще больше не работает в Internet Explorer 9. Кроме того, взгляните на продолжение работы Итана Дальнейшее укрепление пуленепробиваемого синтаксиса ,

Время загрузки увеличивается с количеством шрифтов

С помощью вышеупомянутых опций размеры файлов веб-шрифтов могут быть уменьшены примерно до 30-60 килобайт. Файлы больших шрифтов или слишком много шрифтов на одной веб-странице могут замедлить загрузку страницы, особенно на мобильных устройствах.

Странное временное решение в Firefox

В большинстве браузеров текст не отображается до тех пор, пока не импортированы все веб-шрифты. Однако Firefox отображает текст с использованием системного шрифта и снова отображает текст, когда встроенные веб-шрифты полностью загружены. Эта техника приводит к «вспышке нестандартного текста», которая иногда приводит к побочным эффектам. Веб-дизайнеры могут контролировать это поведение с помощью Google Webfont Loader ,

Результат описанного выше процесса выглядит следующим образом в Safari на Mac OS X.

Встраивание веб-шрифтов с вашего сервера

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

Шрифты на выбор и шрифты, которых следует избегать

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

В настоящее время коммерческие поставщики шрифтов рассчитывают на услуги встраивания веб-шрифтов. Лишь немногие поставщики поставляют специальные пакеты веб-шрифтов для хранения на собственном веб-сервере заказчика, среди них FSI FontShop International а также Fontspring , Растущее число пакетов веб-шрифтов также можно лицензировать через MyFonts.com ,

После того, как Web Open Font Format (WOFF) будет принят в качестве стандарта, больше поставщиков шрифтов могут предложить эту услугу.

Встраивание бесплатных и открытых шрифтов

Помимо коммерческих шрифтов, существует большое количество бесплатных и открытых шрифтов, которые вы можете встроить в свои веб-страницы. Список подходящих шрифтов, которые можно бесплатно использовать посредством встраивания @ font-face, можно найти на webfonts.info.

Еще одна огромная коллекция таких шрифтов предлагает Шрифт Белка , Это полезный инструмент для преобразования настольных шрифтов в форматы веб-шрифтов, поскольку он предлагает мощный инструмент, @ font-face Kit Generator ,

Обратите внимание, что шрифты, которые вы хотите конвертировать, должны иметь законное право на встраивание веб-шрифтов!

Создание веб-шрифтов стало проще благодаря генератору Font Squirrel
Создание веб-шрифтов стало проще благодаря генератору Font Squirrel.

Советы, хитрости и обходные пути

За последние два года возможности использования пользовательских шрифтов на веб-страницах развивались быстрее, чем кто-либо ожидал. Но веб-дизайнерам все еще приходится бороться с беспорядком форматов, чтобы обеспечить кросс-браузерную поддержку для данного шрифта. Эта проблема исчезнет, ​​как только Web Open Font Format (WOFF) будет установлен как стандартный формат веб-шрифтов.

Типографское разнообразие   за пределами однообразия системных шрифтов
Типографское разнообразие за пределами однообразия системных шрифтов.

Еще одним препятствием, о котором упоминалось ранее, является распространенность компьютеров под управлением Windows, на которых субпиксельный рендеринг деактивирован (по умолчанию в Windows XP или по предпочтению со стороны пользователей). По сравнению с системными шрифтами большинство веб-шрифтов отображаются с низким качеством на экранах, на которых отсутствует субпиксельная визуализация. Время решит эту проблему, поскольку пользователи заменяют старое оборудование и операционные системы. Тем временем Internet Explorer 9 работает с текстовым движком DirectWrite, который обеспечивает значительно улучшенный рендеринг.

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

Макет текста

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

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

Особенности оформления OpenType

По мере распространения веб-шрифтов в фокус попал еще один недостаток текстовой разметки, используемый общими браузерами: высококачественные программы для настольных издательских систем, такие как InDesign и QuarkXPress 7+, не поддерживают типографские функции OpenType.

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

< <   Сгенерированные компьютером маленькие заглавные буквы (серые сверху) и настоящие маленькие заглавные буквы (синие снизу) в бета-версии Firefox 4
Сгенерированные компьютером маленькие заглавные буквы (серые сверху) и настоящие маленькие заглавные буквы (синие снизу) в бета-версии Firefox 4.

Некоторые шрифты можно использовать только через функции OpenType. Возьмите объединенные латинские буквы или арабские буквы, в которых форма символа зависит от его положения в слове и от соседних символов. Следовательно, комплексные шрифты OpenType могут содержать альтернативные глифы для данного символа. С помощью функций OpenType базовая версия символа будет заменена версией с соответствующими соединениями в зависимости от контекста. Текущая бета-версия Firefox 4 предлагает доступ к этой функции OpenType впервые. Вы можете определить с этим специфичным для браузера атрибутом:

h1 {-moz-font-feature-settings: 'smcp = 1'; }

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

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

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

(al) (sp) (ik)

Похожие

Выбор генератора кода PHP - 6 популярных решений
... и Арсено Опубликовано 9 марта 2017 г. Генераторы кода PHP - это программы, которые автоматически генерируют код на основе выбранных вами настроек и параметров. Преимущество использования генератора кода заключается в том, что он позволяет сэкономить время и деньги . Кодирование с целью выполнения конкретной задачи
HTML5 видеоплеер jQuery плагин
... ся большинством браузеров (современными браузерами). Его инициализация очень проста. В ходе сегодняшнего расследования я понял несколько вещей: каждый браузер поддерживает только несколько форматов видео, и каждый браузер имеет свои собственные элементы управления видео (и все они разные). Но, к счастью, html5 может предоставить нам все необходимые возможности для создания собственного интерфейса для управления нашим видеоэлементом. Сегодня я покажу вам процесс сборки собственного html5 плеера
Ваш отель глазами гостя. Вы ориентированы на гостя?
... ванный на гостя подход - «войти в туфлю гостя», смотреть глазами, думать головой, чувствовать пальцы. Не только во время пребывания в отеле, потому что путешествие начинается с самой идеи, с поиска вдохновения для путешествия и выбора предложения. С чего начать? Как и в классическом маркетинге, сначала необходимо определить наиболее важные группы наших гостей. Для кого наш отель? Они приходят издалека или рядом? Сами, с семьей, с группой друзей, с коллегами? Вам нужен мир или активный
Почему я не стал журналистом? Информация века в конце.
... на, мне 28 лет. В 2011 году я окончил факультет журналистики и политических наук в Варшавском университете. Во время учебы у меня была возможность пройти несколько стажировок в СМИ и PR-агентствах. Я пробовал это и это. И это на самом деле не пробовало меня, поэтому я решил, что пойду на то, что попробовал больше всего, и ... я стал барменом. Да. Я не знаю, почему во время учебы я определенно
Серверы Ultimate: запуск веб-серверов с вашего устройства Android [Android 2.1+]
Реклама Запуск ваших собственных серверов имеет свои преимущества. Вы можете запускать свои собственные веб-сайты, свои собственные адреса электронной почты, свой файловый хостинг, свои календари и многое другое. Чтобы оставаться максимально гибкими, владея вашими данными, а не присматривать за ними какую-то другую компанию, лучше использовать собственные серверы. Поскольку все больше и больше энергосберегающих устройств работают под управлением Android, необходимо иметь возможность
3 аддона FireFox, которые заставят вас полюбить Википедию
... ился несколькими приятными инструменты для визуализации статей в Википедии и пусть вам лучше понять базовую структуру темы. Я также посмотрел на некоторые потрясающие инструменты Википедии это поможет вам обнаружить противоречивый контент и темы, связанные с исследованиями. На этой неделе
🐿️ [5 шагов] Быстро добавьте Fantastic Font Squirrel типы на ваш сайт
... современном веб-дизайне шрифты довольно легко вернуть в отличие от первых дней Интернета - благодаря таким сайтам, как Font Squirrel"> В современном веб-дизайне шрифты довольно легко вернуть в отличие от первых дней Интернета - благодаря таким сайтам, как Font Squirrel. Хотя раньше возможности ограничивались несколькими шрифтами, которые должен был использовать каждый, сегодня доступно гораздо больше вариантов, поскольку они больше не ограничиваются файлами, доступными на компьютере. Шрифты
12 способов ускорить Firefox Quantum
... во изменений, изменив его функции «под капотом» и «под капотом», чтобы якобы работать быстрее, чем когда-либо. Firefox Quantum, как сейчас известно, наконец-то может обогнать Chrome - по скорости, если не по популярности. Переход на Quantum также означает, что многие верные старые приемы для ускорения работы больше не работают (прощай, конвейерная обработка). Хорошей новостью является то, что есть множество новых советов, чтобы заменить их, и у нас есть они для вас здесь.
"Были приключения" Олег Винник рассказал о нелегком пути к славе
... на русском Олег Винник признался, каким было начало его карьеры в Украине и доволен сейчас он своей физической формой Винник появился в новом образе / фото viva.ua Но Олег настоял на своем и сегодня является одним из самых успешных
Ретро 3D машина с вашей самоотдачей ~ привлекательный подарок для мужчины
Если вы ищете подарок для своего мужчины, то автомобиль Retro Retro - это хит! Каждый парень в большей или меньшей степени любит четыре колеса. Вот почему этот 3D-кристалл понравится вашему парню. Он по достоинству оценит качество исполнения и воспроизведение деталей этого исторического автомобиля. Конечно, он будет наслаждаться тем, что вы знаете и принимаете его интересы. Статуэтка с ретро-3D автомобилем - идеальный подарок для каждого автолюбителя! Вот как
Android: это 5 лучших антивирусных приложений для вашего смартфона
... ивирусное приложение для Android теперь обязательно. Поэтому пользователи не должны стесняться устанавливать правильное приложение на свой смартфон. Чтобы оценить эффективность защиты, независимый институт AV-Test тестирует различные антивирусные решения. Это 5 лучших антивирусных сканеров для вашего смартфона на Android. Хороший сканер вирусов для Android защищает вас от интернет-угроз. (Источник: Netzwelt) содержание

Комментарии

Все еще потрясающе после всех этих лет StumbleUpon для Firefox - это все еще круто StumbleUpon для Firefox - это все еще круто Где вы можете найти интересные места, на которые стоит посмотреть?
... на большом экране, одновременно управляя им со смартфона в руке. Но это еще не все, что есть, есть много других причины любить Chromecast Обзор Google Chromecast и раздача подарков Обзор Google Chromecast и раздача подарков
Чтобы надежно разгадать тайну, нужно ответить на второй вопрос - является ли флорист торговым или сервисным центром?
Чтобы надежно разгадать тайну, нужно ответить на второй вопрос - является ли флорист торговым или сервисным центром? Предоставляет ли работник магазина букеты и услуги по продаже, или просто продает цветы и другие предметы? Помимо продажи цветов, флористы также предлагают цветочные и флористические услуги. Владелец цветочного магазина может указать, что его бизнес - это услуги и торговля, заключающаяся в изготовлении букетов и композиций и продаже их. Если он укажет, что первое из этих действий
Что такое «добросовестное использование» и как оно работает?
Что такое «добросовестное использование» и как оно работает? Добросовестное использование - это юридическая доктрина, которая гласит, что в некоторых случаях вы можете ограниченно использовать защищенные авторским правом источники без разрешения владельца авторских прав. Он определяется судьей, который анализирует конкретное дело на основе набора принципов в Соединенных Штатах. В частности, добросовестное использование источников YouTube может применяться в следующих
Сколько блогеров задаются вопросом о качестве своего текста именно из уважения к читателю?
Сколько блогеров задаются вопросом о качестве своего текста именно из уважения к читателю? Это не о манипуляции. Дело в том, что если мы думаем, что нам есть что донести до читателя и «поймать» его нашим постом на FB, пожалуйста, нажмите, введите нас, не делайте из этого яйца и относитесь к этому серьезно. Запись "5 способов ..." не плохая вещь. Вместо шрифта напишите текст, организуйте его в точки, заголовки, добавьте строку. № 2. А сколько блоггеров знают, что такое свинец?
Зачем тратить время на разработку для конкретной платформы, а затем переписывать код каждый раз, когда вы хотите настроить таргетинг на другую платформу?
Зачем тратить время на разработку для конкретной платформы, а затем переписывать код каждый раз, когда вы хотите настроить таргетинг на другую платформу? OpenFL дает вам возможность узнать, что код, который вы пишете сегодня, для платформы, на которую вы нацеливаетесь сейчас, может быть впоследствии повторно использован на множестве других платформ в будущем. OpenFL действительно является причиной, по которой Lightbot находится там, где он есть сегодня, и может быть загружен и
Решение?
Решение? Загрузите контент, который вы хотите. процесс боковой загрузки приложений на Android TV во многом похож на боковую загрузку приложений на мобильной версии Android. Необходимо разрешить устройству устанавливать приложения из неизвестных источников, перейдя в « Настройки»> «Личные»> «Безопасность и ограничения» и переместив переключатель рядом с
Источником бесперебойного питания (ИБП) является решение, но что, если из-за пространственных факторов или факторов окружающей среды (пыль и т. Д.) Традиционные внешние ИБП нецелесообразны?
Источником бесперебойного питания (ИБП) является решение, но что, если из-за пространственных факторов или факторов окружающей среды (пыль и т. Д.) Традиционные внешние ИБП нецелесообразны? ИБП в ПК затем приходит на помощь. Что такое ИБП По своей сути, ИБП является вторичным источником питания - аккумулятором, который подключается к системе, чтобы вступать во владение в случае изменения мощности. Они бывают
Какой размер лота следует использовать, чтобы его счет не подвергался слишком большому риску?
Какой размер лота следует использовать, чтобы его счет не подвергался слишком большому риску? Мы ссылаемся на калькулятор размера позиции, чтобы сделать математику для нас: Мы можем ясно видеть, что трейдер может использовать максимум 15 микро-лотов (0,15 лота) для этой сделки. Если трейдер намеревается совершить более

Eot?
Вы ориентированы на гостя?
С чего начать?
Для кого наш отель?
Они приходят издалека или рядом?
Сами, с семьей, с группой друзей, с коллегами?
Чтобы надежно разгадать тайну, нужно ответить на второй вопрос - является ли флорист торговым или сервисным центром?
Предоставляет ли работник магазина букеты и услуги по продаже, или просто продает цветы и другие предметы?
Что такое «добросовестное использование» и как оно работает?
Сколько блогеров задаются вопросом о качестве своего текста именно из уважения к читателю?