font-kerning в CSS


Содержание

свойство font-kerningCSS3-генератор ☛

Свойство font-kerning управляет кернингом шрифта. Кернинг — это изменение интервала между определёнными сочетаниями букв для сохранения плотности букв в тексте. Это особенно важно для букв, у которых есть наклонные линии, вроде А, У, W, V. Информация о кернинге хранится в самом шрифте и если шрифт не поддерживает эту возможность, то свойство font-kerning не окажет влияние на текст.

На рис. 1 показаны некоторые сочетания букв без кернинга и с кернингом.

Рис. 1. Текст без кернинга и с ним

Краткая информация

Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам, включая ::first-letter и ::first-line .
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Пример

Объектная модель

Примечание

Chrome до версии 33, Opera до версии 20 и Safari поддерживают свойство -webkit-font-kerning .

Спецификация ?

Спецификация Статус
CSS Fonts Module Level 3 Редакторский черновик

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
29 33 16 20 7 34
Android Firefox Mobile Opera Mobile Safari Mobile
4.4.4 34 33 8

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Настройка Кернинга в CSS

17 Jeffrey Lo [2010-10-03 08:31:00]

Возможно ли с помощью CSS корректировать кернинг в CSS? Я хотел бы иметь возможность ядра блока текста, чтобы он выглядел как блок текста (выравниваются левый и правый края).

EDIT: Используя http://letteringjs.com/ в сочетании с http://www.kernjs.com/ делает для довольно хорошего кернинга. Что касается исходной проблемы, http://fittextjs.com/ прекрасно это понимает.

6 ответов

18 Решение Frédéric Hamidi [2010-10-03 08:39:00]

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

Однако, если вам нужно всего лишь «выровнять по левому и правому краям», вы можете попробовать использовать text-align: justify .

EDIT: CSS3 определяет свойство font-kerning, которое можно использовать для включения или отключения кернинга для определенных элементов.

Как ответил пользователь Typeoneerror, letter-spacing влияет не на кернинг. См. Концепцию кернинга Wikipedia.

Кернинг не контролируется буквенным интервалом, и для CSS1 или CSS2 нет шрифтово-кернинга. Новая спецификация, CSS3, не была одобрена в качестве стандарта (Рекомендация W3C), но есть свойство, предлагаемое для font-kerning , см. Проект 2012 года,

Только специальные шрифты, такие как OpenFonts, имеют это свойство.

CSS не «контролирует кернинг», но при использовании ненулевого расстояния между буквами «человеческое кернинг-восприятие» может быть потеряно. Пример: увеличьте кернинг с помощью letter-spacing:-0.1em и потеряйте с помощью letter-spacing:0.5em .

С свойством CSS1 letter-spacing вы можете потерять или улучшить восприятие кернинга, а в «текст с разнесением букв» вы можете имитировать кернинг:

Ниже приведен пример .

EDIT 2014: я не изменил исходный текст выше сегодня, я открываю ответ для ваших изменений (режим Wiki), для proofreading и обновления. На данный момент это самый проголосовавший ответ (21 против 10) и HTML5 будет рекомендацией. Пожалуйста, помогите улучшить этот текст ( и/или связанный текст в Википедии!).

Типографическое выравнивание как слева, так и справа называется оправданием. Кернинг больше связан с настройкой пробелов между буквами и не имеет особого отношения к выравниванию (потому что оправдание текста — это более удобная настройка пробелов между словами, чем символы). В любом случае вы хотите установить для свойства text-align значение justify :

Кернинг, буквенное расстояние (ака трекинг) и выравнивание блоков — это три разных свойства типографии.

Самая новая ссылка, которую я нашел о кернинге, — от TypeKit, с указаниями о том, как включить встроенные данные кернинга с их веб-сайтами. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

Ручной кернинг — настройка пространства между каждой отдельной буквой в слове — всегда будет вопросом вкуса и предпочтения. И может быть достигнуто через kern.js или kerning.js

Что отличает решение TypeKit от меня, разрешает ли кернинг для всего текстового текста автоматически использовать метаданные в шрифтах OpenType. Я просто нашел его и очень рад использовать его в своем следующем проекте!

Для удобства использования новые свойства css, обсуждаемые в ссылке, следующие:

С префиксами для font-feature-settings включая:

1 dav_i [2013-10-06 13:34:00]

Посмотрите мой проект Jerning.com [см. ниже] для текста кернинга.

Использование очень простое и основано на парах символов, например:

W и o будут выглядеть странно без кернинга.

который будет применять кернинг между всеми верхними регистрами W и нижним регистром o в тегах h1 .

Я удалился в проект Jerning, но, пожалуйста, найдите, пожалуйста, сокращенный исходный код для включения в ваш проект:

К сожалению, у меня больше нет версии без миниатюры; вышесказанное не гарантирует отсутствие всех случаев!

0 dd_1138 [2020-09-24 00:44:00]

Кажется, что требуется динамический кернинг, потому что то, что открывает Thread, а также я/нуждается в этом: justify выравнивает блок, насколько это возможно, добавляя пространство между словами, которое оставляет «дыры», в текстовом блоке. Теперь возьмите вместо этого строку с левым выравниванием (так что добавьте свободное пространство), вычислите ее физическую ширину, сравните с доступной шириной блока, разделите diffrence на число букв в этой строке, затем используйте это значение как дополнение к буквенному пространству. Это будет больше похоже на макет газеты, чем на выравнивание текста: justify. Я должен сказать, что я не уверен, можно ли получить доступ к строкам в текстовом блоке «по номеру строки» в динамическом макете страницы, не так ли? edit: Я пробовал это вчера. Я использую innerHTML для чтения содержимого текстового блока, а затем разбиваю его и копирую в массив, каждый из которых получает каждый свой тег DIV и идентификатор. Тогда я правильно распределяю буквы. Только немногие из новейших браузеров поддерживают подпиксельную букву, поэтому она работает только с шрифтами среднего и большого размера. Проблема, с которой я сталкиваюсь: из-за отсутствия Subpixelsupport она работает только в некоторой степени, хотя и выглядит красиво, поэтому я попытался дополнительно обосновать результат с помощью атрибута text-align, но он не работает после того, как я изменил порядок пробелов. Левая и правая выравнивание работает, но не «оправдывает», это работает только до добавления ширины букв. Может быть оперной проблемой. Если я смогу это исправить, я отправлю код.

edit 2. он работает сейчас, но по какой-то причине я не могу отправлять код здесь. то есть от webkit 10.3.3.13 на мобильном телефоне. Отправьте мне сообщение, если вас интересует код.

СSS3 Свойство font-kerning

Пример


Указать, что применяется кернинг шрифтов:

Определение и использование

Свойство font-kerning управляет использованием информации кернинга, хранящимся в шрифте.

Совет: Кернинг определяет расстояние между буквами.

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

Значение по умолчанию: auto
Унаследованный: да
Анимируемый: нет Прочитайте о animatable
Версия: CSS3
JavaScript синтаксис: object.style.fontKerning=»normal»

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit- указывают первую версию, которая работала с префиксом.

CSS font-kerning

The font-kerning property is used for the contextual adjustment of inter-glyph spacing.

is a typographic term that refers to the adjustment of space between two specific characters. These two characters are referred to as a . Kerning is often done when there’s too much space between two characters, but it can also be done when there’s not enough space. Kerning adjusts the spacing to be optically correct.

The bottom word has had kerning applied to it. Notice that it has a much more even space distribution between all three letters than the top example (which has had no kerning applied).

Certain characters can cause spacing issues that only manifest when paired with another potentially problematic character. The letter pairs that most often need kerning tend to be combinations of uppercase and lowercase characters, as well as pairs containing punctuation. So pairs like «To», «Te», «Ve», «w.», etc, are good kerning candidates.

Note that it’s not the single character that causes the issue. It’s the pair that causes the issue. While a certain character might be prone to spacing issues, those issues will only manifest when paired with certain other characters. For example, the uppercase pair «AV» often causes problems, but «AI» doesn’t. So words like «AVAIL» have the potential to look a bit uneven with its spacing.

Most good fonts have a built-in kerning table that list specific letter pairs and the spacing adjustments that should be applied to them. A high quality font typically comes with between 500 and 1000 kerning pairs, so kerning is often applied automatically. However there may be cases where you don’t want kerning to be applied automatically. You can use the font-kerning property to enable or disable kerning as required.

The font-kerning property will have no visible effect when using fonts that don’t include any kerning data.

Syntax

The syntax of the font-kerning property is:

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Example Code

Official Specifications

  • CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS | font-kerning Property

This property is used to control the usage of the Kerning Information that has been stored in the Font. Kerning defines how letters are spaced. This property will have no visible effect for those fonts that do not have kerning information.

Syntax:

  • auto: It is the default value. The Browser decides whether font-kerning is applied or not.
  • normal: It is used to specify that font-kerning is apply normally on the browsers.
  • none: It is used to specify that font-kerning is not applied.

Шрифты в вебе, обзор от 2020 года

Предисловие

Вступление

В 2020 году нестандартными шрифтами никого не удивишь. 93% браузеров поддерживают их, и около 62% сайтов их используют. Кто-то просто пишет @font-face или вставляет
с Google Fonts, кто-то вставляет мегабайт шрифтов в base64 прямо в css. Возможностей много.

Загрузка

Статья была бы неполной без таблички разного поведения браузеров во время загрузки шрифтов, но я не могу себе позволить её вставить — она так часто встречается, что уже, вероятно, вызывает нервный тик.

FOIT — flash of invisible text. Сначала отрисовывается страница без текста, затем — сразу с нужным шрифтом.
FOUT — flash of unstyled text. Сначала используется один шрифт, затем — загруженный.
FOFT — некоторые выделяют такой подтип проблем, но встречается реже.

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

@font-face без дополнительных ухищрений

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

  • Не требует дополнительных усилий
  • Скорее всего, пользователи привыкли к такому поведению и редко заостряют на этом внимание

Минусы:

  • Разное поведение в разных браузерах
  • Спорное поведение в некоторых случаях

Библиотека для определения загрузки шрифта

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

  • Контроль за использованием шрифтов
  • Небольшой размер библиотек
  • Просто использовать

Минусы:

  • Переключение шрифта заметно пользователю
  • Может приводить к перемещению элементов на странице из-за смены размера текста
  • Требуются дополнительные ухищрения для отсутствия перерисовки шрифта при перезаходе: флаги в куках, sessionStorage

Ссылки:

Кодирование шрифта в base64

Самый разнообразный способ. Можно инлайнить шрифт прямо в основной файл стилей, грузить их асинхронно или вовсе складывать в localStorage. Для кого-то окажется неожиданным то, что после gzip размер отличается от бинарного файла совсем немного.

  • В общем случае не нужны дополнительные библиотеки для определения загрузки шрифтов
  • При использовании вместе с основной частью css делает ситуации с foit и fout гораздо реже
  • При сохранении в localStorage всё кеширование шрифтов в наших руках



Минусы:

  • Теряется поддержка нескольких типов шрифтов. Либо нужно их дублировать (и тем самым увеличивать общий размер), либо выбрать наиболее распространённый (например, woff и потерять экономию от woff2)
  • Окончание загрузки css — не гарант того, что шрифт может быть сразу отображён! Как и вставка этого css напрямую в страницу. Браузерам требуется время на парсинг шрифтов перед их использованием. Всё это выливается в три стадии отрисовки: дефолтный шрифт, foit, нужный шрифт
  • При вставке просто в css будет задерживать первую отрисовку всей страницы

Ссылки:

font-display

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

Это не совсем способ загрузки, а некоторая оптимизация. С помощью preload можно сократить время до окончания загрузки веб-шрифтов, попутно уменьшить вероятность foit. Браузеры на основе Blink начинают загружать шрифты только после того, как найдут текст на странице с соответствующим шрифтом, а это сильно откладывает окончательный показ страницы: нужно загрузить css, распарсить её, применить к дом-дереву и найти нужный элемент. preload указывает браузеру, что указанный ресурс стоит грузить прямо сейчас. Требуются атрибуты as, type и crossorigin.

Всё остальное

Есть ещё несколько вариаций всего перечисленного, а также вариант через JS (об этом ниже). Например, можно загрузить только одно начертание шрифта, а все остальные использовать при повторных заходах. Или сильно урезать набор используемых символов шрифта (до 5-10 кб) и положить всё это в base64. А может, на первом заходе вообще не использовать на первом заходе нестандартные шрифты, а только загружать их? Также можно не использовать шрифты, если текста почти нет: для логотипов вполне подойдёт SVG. Что выбрать? Каждый решает сам для себя, на основе дизайна, шрифта(-ов) и аудитории.

FontFace

Новое js-api позволяет загружать и использовать шрифты, не используя объявление @font-face вообще. Несколько примеров, чтобы было понятно, о чём речь:

Троеточие — не часть кода.

Проблема в том, что понять, какой формат поддерживается, напрямую нельзя. Поддержка браузерами тоже не полная, но к ней добавится Safari 10. FontFace может быть полезен при отрисовке текста через canvas, так как не придётся создавать невидимые элементы с текстом.

CSS-свойства

font-weight и font-style

font-weight — достаточно известное свойство. Часто можно увидеть bold, реже — что-то со значением в числах. Стоит отметить то, что веб всё чаще выбирается из bold/italic/bold-italic, сейчас можно увидеть всевозможные thin, light, medium (таких ключевых слов нет, но для них как раз используются числовые значения). Другой интересный вопрос — что делают браузеры, если нужного начертания нет в наличии? В случае жирного/курсивного начертания они пытаются сгенерировать глифы на основе обычной вариации шрифта.

unicode-range

Данное свойство позволяет указать список символов, которые должны быть отображены шрифтом. Это может быть полезно в качестве оптимизации — если на странице не будет символов из этого списка, шрифт не будет загружен вовсе. Также unicode-range можно использовать для стилизации отдельных символов, например, кавычек или для отображения символа рубля. Проблема может быть в поддержке этого свойства браузерами, и хотя она постепенно уходит, всё равно нужно думать: «а что, если бы unicode-range не было».

font-variant и font-feature-settings

font-variant — несколько обновлённый вариант font-feature-settings. Эти свойства позволяют задействиовать дополнительные возможности, включённые в шрифт. Например, кернинг, диагональные дроби, лигатуры и различные варианты иероглифов.

text-rendering

Свойство задумывалось как обобщённый регулятор скорости отрисовки шрифта, влияя одновременно на кернинг и лигатуры. Несмотря на свою мощность, свойство не получило значительного распространения и заслужило славу бажного и тормозного. В настоящее время имеет смысл воспользоваться font-variant и font-kerning, они дают больше контроля (если не так важна поддержка браузерами, а иначе — font-feature-settings). На самом деле, text-rendering является свойством SVG и не описано ни в одной спецификации CSS.

font-kerning

font-kerning контролирует работу кернинга (отступы между отдельными сочетаниями букв). Для включения требуется информация о кернинге внутри самого шрифта. Является более современной заменой части функционала font-feature-settings.

font-stretch

Редкоиспользуемое свойство с тяжёлой судьбой. Введённое в CSS 2 и поддержанное в Firefox 9 с Internet Explorer 9, оно было удално из CSS 2.1 и забыто до CSS 3, а не так давно было добавлено в Chrome 48. Оно позволяет использовать альтренативные начертания шрифта, более узкие или широкие.

Использование встроенных шрифтов

В OS X и iOS очень интересная ситуация с системными шрифтами. Недавно там были представлен San Francisco в качестве основного шрифта интерфейса системы. И если Helvitica Neue можно было указать прямо в font-family (хоть порой в сложном варианте), то с San Francisco такой способ был намеренно затруднён. По новой логике, чтобы разработчики не затачивались на какой-то конкретный шрифт, в таких случаях нужно использовать ключевые слова «-apple-system-*», которые поддерживаются с iOS 7. Как аналог, в десктопном хроме недавно добавили значение BlinkMacSystemFont.

В Android есть шрифт Roboto, который недоступен по своему имени. Однако можно использовать простые sans-serif, sans-serif-light, sans-serif-medium и другие.

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

Оптимизация

Самое простое — использовать оптимальный формат. Появившийся не так давно woff2 некоторые оценивают как лучший вариант для шрифтов, из-за примерно 30% уменьшения размера файла по сравнению с woff. Судя по caniuse — woff2 скоро будет поддерживаться в Edge и должен быть в новом Safari 10.

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

Определение текущего шрифта элемента

Иногда стоит задача определения текущего шрифта элемента. В случае разработки могут помочь Chromium Developer Tools и недавно вернувшаяся панелька Fonts из Firefox. В ином случае остаётся только считать размер элемента и сравнивать его после смены значения font-family. Примерно этим занимаются FontFaceOnload и FontFaceObserver, если в браузере недоступен js-интерфейс FontFace. Почему браузеры не предоставляют для этого внятного апи? Дело в том, что отдельные символы внутри одного элемента могут быть отрисованы разными шрифтами, которые перечислен в font-family. На это может влиять упомянутый выше unicode-range и сам набор глифов шрифта.

Настройка Кернинга в CSS

Возможно ли с помощью CSS корректировать кернинг в CSS? Я хотел бы иметь возможность ядра блока текста, чтобы он выглядел как блок текста (выравниваются левый и правый края).

EDIT: Используя http://letteringjs.com/ в сочетании с http://www.kernjs.com/ делает для довольно хорошего кернинга. Что касается исходной проблемы, http://fittextjs.com/ прекрасно это понимает.

Как ответил пользователь Typeoneerror, letter-spacing влияет не на кернинг. См. Концепцию кернинга Wikipedia.

Кернинг не контролируется буквенным интервалом, и для CSS1 или CSS2 нет шрифтово-кернинга. Новая спецификация, CSS3, не была одобрена в качестве стандарта (Рекомендация W3C), но есть свойство, предлагаемое для font-kerning , см. Проект 2012 года,

Только специальные шрифты, такие как OpenFonts, имеют это свойство.

CSS не «контролирует кернинг», но при использовании ненулевого расстояния между буквами «человеческое кернинг-восприятие» может быть потеряно. Пример: увеличьте кернинг с помощью letter-spacing:-0.1em и потеряйте с помощью letter-spacing:0.5em .

С свойством CSS1 letter-spacing вы можете потерять или улучшить восприятие кернинга, а в «текст с разнесением букв» вы можете имитировать кернинг:

Ниже приведен пример .

EDIT 2014: я не изменил исходный текст выше сегодня, я открываю ответ для ваших изменений (режим Wiki), для proofreading и обновления. На данный момент это самый проголосовавший ответ (21 против 10) и HTML5 будет рекомендацией. Пожалуйста, помогите улучшить этот текст ( и/или связанный текст в Википедии!).

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

Однако, если вам нужно всего лишь «выровнять по левому и правому краям», вы можете попробовать использовать text-align: justify .

EDIT: CSS3 определяет свойство font-kerning, которое можно использовать для включения или отключения кернинга для определенных элементов.

Типографское выравнивание слева и справа называется выравниванием. Кернинг больше касается корректировки пробелов между буквами и не имеет ничего общего с выравниванием (поскольку выравнивание текста — это больше коррекция пробелов между словами, чем символов). В любом случае, вы хотите установить свойство text-align для justify :

Посмотрите мой проект Jerning.com [см. ниже] для текста кернинга.

Использование очень простое и основано на парах символов, например:

W и o будут выглядеть странно без кернинга.

который будет применять кернинг между всеми верхними регистрами W и нижним регистром o в тегах h1 .

Я удалился в проект Jerning, но, пожалуйста, найдите, пожалуйста, сокращенный исходный код для включения в ваш проект:

К сожалению, у меня больше нет версии без миниатюры; вышесказанное не гарантирует отсутствие всех случаев!

Кернинг, буквенное расстояние (ака трекинг) и выравнивание блоков — это три разных свойства типографии.

Самая новая ссылка, которую я нашел о кернинге, — от TypeKit, с указаниями о том, как включить встроенные данные кернинга с их веб-сайтами. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

Ручной кернинг — настройка пространства между каждой отдельной буквой в слове — всегда будет вопросом вкуса и предпочтения. И может быть достигнуто через kern.js или kerning.js

Что отличает решение TypeKit от меня, разрешает ли кернинг для всего текстового текста автоматически использовать метаданные в шрифтах OpenType. Я просто нашел его и очень рад использовать его в своем следующем проекте!

Для удобства использования новые свойства css, обсуждаемые в ссылке, следующие:

С префиксами для font-feature-settings включая:

Кажется, что требуется динамический кернинг, потому что то, что открывает Thread, а также я/нуждается в этом: justify выравнивает блок, насколько это возможно, добавляя пространство между словами, которое оставляет «дыры», в текстовом блоке. Теперь возьмите вместо этого строку с левым выравниванием (так что добавьте свободное пространство), вычислите ее физическую ширину, сравните с доступной шириной блока, разделите diffrence на число букв в этой строке, затем используйте это значение как дополнение к буквенному пространству. Это будет больше похоже на макет газеты, чем на выравнивание текста: justify. Я должен сказать, что я не уверен, можно ли получить доступ к строкам в текстовом блоке «по номеру строки» в динамическом макете страницы, не так ли? edit: Я пробовал это вчера. Я использую innerHTML для чтения содержимого текстового блока, а затем разбиваю его и копирую в массив, каждый из которых получает каждый свой тег DIV и идентификатор. Тогда я правильно распределяю буквы. Только немногие из новейших браузеров поддерживают подпиксельную букву, поэтому она работает только с шрифтами среднего и большого размера. Проблема, с которой я сталкиваюсь: из-за отсутствия Subpixelsupport она работает только в некоторой степени, хотя и выглядит красиво, поэтому я попытался дополнительно обосновать результат с помощью атрибута text-align, но он не работает после того, как я изменил порядок пробелов. Левая и правая выравнивание работает, но не «оправдывает», это работает только до добавления ширины букв. Может быть оперной проблемой. Если я смогу это исправить, я отправлю код.

edit 2. он работает сейчас, но по какой-то причине я не могу отправлять код здесь. то есть от webkit 10.3.3.13 на мобильном телефоне. Отправьте мне сообщение, если вас интересует код.

Посмотрите другие вопросы по метке css или Задайте вопрос


Настройка Кернинга в CSS

возможно ли с помощью CSS настроить Кернинг в CSS? Я хотел бы иметь возможность kern блок текста, чтобы он действительно выглядел как блок текста (как левый, так и правый края выровнены).

EDIT: использование http://letteringjs.com/ в сочетании с http://www.kernjs.com/ делает для довольно хорошего Кернинга. Что касается первоначальной задачи,http://fittextjs.com/ решает это красиво.

6 ответов

как ответил пользователь Typeoneerror, letter-spacing тут не Кернинг влияния. Вижу Кернинг понятие at Википедия.

Кернинг не контролируется интервалом между буквами, и нет шрифт-Кернинга для КНБ1 или в CSS2. Новая спецификация CSS3 не была одобрена в качестве стандарта (рекомендация W3C), но есть свойство, предлагаемое для font-kerning см. 2012 черновик,

в CSS не «контролирует Кернинг», но при использовании ненулевого интервала между буквами»человеческое восприятие Кернинга» может быть потерян. Пример: улучшение Кернинга с помощью letter-spacing:-0.1em и потерял с letter-spacing:0.5em .

С КНБ1 letter-spacing вы можете проиграл или enhance Кернинг восприятия, и в «текст с интервалом между буквами» вы можете режим Кернинга:

редактировать : Я не изменил оригинальный текст выше сегодня,Я открываю ответ на ваши изменения (режим Wiki), for вычитка и обновления. На данный момент это самый проголосованный ответ (21 против 10) и HTML5 будет рекомендацией. Пожалуйста, помогите улучшить этот текст (и / или связанный текст Википедии!).

некоторый контроль над кернингом может быть достигнут в CSS с помощью атрибут интервала между буквами.

однако, если все, что вам нужно, это «выровнять левый и правый края», вы можете попробовать использовать text-align: justify .

EDIT: С помощью CSS3 определяет шрифт-Кернинга свойство, которое можно использовать для включения или отключения Кернинга для определенных элементов.

типографское выравнивание как слева, так и справа называется оправданием. Кернинг больше связан с регулировкой пробелов между буквами и не имеет большого отношения к выравниванию (потому что оправдание текста-это больше регулировка пробелов между словами, чем символов). В любом случае, вы хотите установить text-align свойство justify :

Kerning, letter-spacing (aka tracking) и justify blocks-это три разных свойства типографии.

новейшая ссылка, которую я нашел о кернинге, — это TypeKit, с указаниями о том, как включить встроенные данные Кернинга с помощью своих веб-фонтов. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

ручной Кернинг-регулировка пространства между каждой буквой в слове-всегда будет вопросом вкуса и предпочтения. И может быть достигнуто через Керн.js или Кернинг.js

что делает решение TypeKit выделиться для меня, это позволяет Кернинг для всего текста тела автоматически, используя метаданные в шрифтах OpenType. Я только что нашел его, и я очень рад использовать его в своем следующем проекте!

для удобства ссылки новые свойства css, обсуждаемые в ссылке:

С приставками для font-feature-settings в том числе:

проверьте мой проект Jerning.com [см. ниже] для текста kerning.

использование очень просто и основано на парах символов, например:

The W и o будет выглядеть странно без Кернинга.

который будет применять Кернинг между всеми верхним регистром W S и в нижнем регистре o s в h1 теги.

Я удалил Jerning проект, но, пожалуйста, найдите уменьшенный исходный код ниже для включения в ваш проект, если вы хотите:

к сожалению, у меня больше нет не уменьшенной версии; вышеизложенное не имеет никаких гарантий работы всех случаев!

что, по-видимому, требуется, это динамическое Кернинг, потому что то, что открыватель потока, а также Я/нуждается в этом: оправдание делает выравнивание блока как можно лучше, добавляя пространство между словами, которое оставляет «отверстия» в текстовом блоке. Теперь возьмите вместо этого линию с левым выравниванием (так что нет добавленного пространства), вычислите ее физическую ширину, сравните с доступной шириной блока, разделите разницу через количество букв в этой строке, а затем используйте это значение в качестве добавления пространства букв. Этот будет выглядеть больше как макет газеты, чем только текст-выровнять:оправдать. Я должен сказать, что я не уверен, можно ли получить доступ к строкам в textblock «по номеру строки» в динамическом макете страницы, не так ли? edit: я пробовал это вчера. Я использую innerHTML для чтения содержимого текстового блока, затем я разделяю и копирую его в массив, из которого каждая запись/строка получает свой собственный тег DIV и id. Затем я переставляю буквы соответствующим образом. Только некоторые из новейших браузеров поддерживают subpixel-letterspacing, поэтому он работает только со шрифтами среднего и большого размера. Проблема, с которой я сталкиваюсь: из-за отсутствия Subpixelsupport он работает только в некоторой степени, хотя и хорошо выглядит, поэтому я попытался дополнительно обосновать результат атрибутом выравнивания текста, но он не работает после изменения буквенного пространства.. Левое и правое выравнивание работает, но не «оправдывает», это работает только до добавления буквенного пространства. Это может быть проблемой оперы. Если я смогу это исправить, я отправлю код.

Изменить 2. это работает сейчас, но для некоторых причина, по которой я не могу отправить код здесь. это из webkit 10.3.3.13 на мобильном телефоне. Отправьте мне сообщение, если вас интересует код.

Немного о типографике в CSS3

Спецификация CSS3, которая является последней на сегодняшний день, содержит несколько интересных свойств для работы с текстом. Сегодня рассмотрим эти свойства, несмотря на ограниченную их поддержку современными браузерами. Первые три будут из CSS3, а последнее — более старое, из спецификации CSS1, но использовать его будем таким способом, о котором знают немногие…

Свойство font-stretch

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

  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Если вы указываете одно из значений, а оно шрифтом не поддерживается — браузер покажет ближайшее, которое УЖЕ, чем выбранное. Учитывайте это при разработке.
Поддержка браузерами: как ни странно, но только IE9+ поддерживает это свойство.

Свойство font-size-adjust

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

В данном случае размер строчных букв будет умножен на 0,4, а заглавная останется размером 20px.
Поддержка браузерами: только Firefox 3+ поддерживает это свойство.

Свойство font-kerning

Самое бессмысленное из свойств спецификации CSS3, ведь есть letter-spacing , который позволяет регулировать расстояние между буквами текста. Если в ваш шрифт встроена поддержка регулировки расстояния — тогда это свойство позволяет её включить. Если шрифтом эта фича не поддерживается — никакого эффекта не будет
Поддержка браузерами: неизвестно, но мне кажется, ни один браузер этого абсурда поддерживать не будет. Я не нашел ссылки на поддержку ни в одной спецификации. Если у вас есть другая информация — поделитесь, с радостью дополню пост.

Альтернативный font-weight

Старое, доброе свойство. Все наверняка с ним сталкивались, и не раз… Скорее всего, это было что-то вроде «normal» или «bold«. Но это далеко не все значения этого свойства, список значительно шире:

  • bolder
  • lighter
  • 100 (Thin)
  • 200 (Extra Light / Ultra Light)
  • 300 (Light)
  • 400 (Normal)
  • 500 (Medium)
  • 600 (Semi Bold / Demi Bold)
  • 700 (Bold)
  • 800 (Extra Bold / Ultra Bold)
  • 900 (Black / Heavy)

Можно использовать числовые значения, можно текстовые, которые в скобках указаны. В итоге, получается что-то в этом роде:

Редко встретишь такую запись, потому, что в большинстве случаев, она попросту не работает. Все оттого, что все эти начертания должен поддерживать шрифт, а это случается далеко не всегда. Но никто не мешает использовать числовые значения и в итоге сделать файл CSS еще чуточку меньше
Поддержка браузерами: Все браузеры поддерживают это свойство в полном объёме.

Вот и все на сегодня. Комментируйте, подписывайтесь на обновления и удачного дня.

Methods for Controlling Spacing in Web Typography

Easily manage projects with monday.com

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.

Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.

There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We’re going to cover a few of those in this post along with methods for how to deal with them.

Getting one exact headline to look right

I often run into this one, especially when a design contains a highly customized web font that looks great in general, but might look funky when used in a certain context.

Take the following headline using Abril Fatface from Google Fonts:

It a lovely font! However, there are a couple of points I’m not loving with this particular headline, specifically the spacing between a couple of letters, which makes things a little crowded:

This is where kerning comes to the rescue! Kerning is literally defined as the spacing between letters. All font files, whether we know it or not, contain some degree of kerning and we have the CSS font-kerning property to remove it:

It’s is a subtle difference, but one that can come in handy if your designer (or your own eye) wants to do it.

Note that disabling kerning is not always in your best interest. As James Kolce noted in a comment below, well-designed types use kerning as a tool and have a reason to do so. Removing the kerning with CSS, while addressing some specific design needs in a one-off situation, could have unintended consequences on the spacing between letters in the font overall, which could make spacing between other letters not-so-great.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
29* 16* 34 No 76 7*

Mobile / Tablet


iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
8* 46 No 4.4* 78 68

Fixing poor letter-spacing across the board

If you’ve ever worked with a web font where the space between every single letter is either too wide or too narrow, then you know exactly how painful this situation is. Here’s an example using another beautiful Google web font called Dorsa:

That might make for a decent display font for headlines, but could you imagine trying to read that as a paragraph? No bueno.

Kinda hard to read that content!

The CSS letter-spacing property can help make a sweeping change to the paragraph content if we add a couple pixels between each letter:

I wouldn’t go so far as to say this is still the best font for paragraph text, but it is much easier to read with that extra spacing:

See the Pen zKkPqK by CSS-Tricks (@css-tricks) on CodePen.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
30 17 2 9 12 6.1

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
4.0-4.1 46 No 4.4 78 68

Too little or too much spacing between words

This is an offshoot of the last situation except that the spacing issues are between each word rather than individual characters.

This is where the CSS word-spacing property is great and universally accepted by all browsers. Here’s an example of a prose using the Prompt web font which is a little wider than many other fonts and would look nicer if it was dialed down a bit for this use case.

See the Pen GjJaaE by Geoff Graham (@geoffgraham) on CodePen.

Gnarly spacing between lines

Not all line heights are considered equal. Take the way some fonts look bigger than others, even though they have the same assigned font-size value.

Setting the font-size sets the bounding box for which a font is allowed to take up space. If we set our font-size at 20px then that creates a box that takes up 20px of vertical space for each character to occupy.

Some fonts will take up more of the space than others and that will both give the appearance that one font is larger than the other but also that there is more or less vertical space between lines.

We can use the line-height property to help adjust that vertical space. A decent rule of thumb is something like font-size * 1.5 = line-height (or use a unitless line-height: 1.5; ) for legibility but that will depend on the font being used and how it occupies vertical space. Check out molten leading.

Crispness and Legibility

Not all fonts are created equal across operating systems. That’s because each operating system, be it Windows, Mac OS or anything else, will have different process for how many pixels to use when displaying fonts.

Many of us web designers loathe the thought of being beholden to how a system interprets our typography decisions.

There are CSS properties at our disposal to increase the apparent resolution of how fonts are displayed on different systems. This process is more formally known as subpixel rendering because it instructs the browser to attempt to fill missing pixels where they might exist.

There is no shortage of #hotdrama over whether it is appropriate to play with the subpixel rendering of fonts. Despite being written a few years ago, Dmitry Fadeyev summed up his argument against the practice nicely.

The antialiasing mode is not a “fix” for subpixel rendering — in most cases it’s a handicap. Subpixel rendering is technically superior, clearer, and more readable than antialiasing because by utilizing every one of the subpixels it increases its effective resolution used for font smoothing by three times. Antialiasing is useful for certain circumstances, such as for light on dark text, but it is absolutely not a replacement for subpixel rendering, and certainly not a “fix”.

But let’s say we wanted to do it anyway. CSS gives us a certain level of control over the crispness and legibility by using font-smooth to fill in what operating systems might leave behind.

The font-smooth values include:

  • auto : Allows the browser to decide the best case for filling in pixels on fonts.
  • never : Disables the system from auto-smoothing fonts. This will display the font in its natural state, jagged edges and all.
  • always : Instructs the browser toll always add pixels to fonts where it sees the opportunity.

Note: The font-smooth property is considered an unofficial property at the time of this writing and is not recommended for use on a production site. There are vendor prefixes to achieve the effect in WebKit and Mozilla, though there is no standard implementation.

Given that note, the following vendor prefixes are currently available with their own values:

-webkit-font-smoothing

  • none : Disables font smoothing in WebKit browsers.
  • antialiased : Smooths the font on the same level as the pixels already provided by the system.
  • subpixel-antialiased : Smooths the font on a more micro level to give the sharpest text possible, particularly on high-resolution screens.

-moz-osx-font-smoothing

  • auto : Allows the browser to decide whether to optimize the font smoothness.
  • inherit : Takes the property value of the parent element.
  • unset : The same as specifying none in the WebKit prefix.
  • grayscale : Similar to the antialiased value in the WebKit prefix.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
81* 64* 72* No 76* TP*

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
No No No No No No

Oh, wait, you’re using SVG?!

SVG has its own level of support for the techniques we’ve been covering in this post. We’ve got kerning (not likely to do much) and the usual suspects letter-spacing and word-spacing. Interestingly, we also have a textLength attribute which can be used to explicitly set how wide the text should be rendered, and it will stretch/squish the text to accommodate. The lengthAdjust attribute controls whether that should happen to just the characters or the glyphs (like punctuation) too.

In Conclusion

Typography on the web is hard! Yes, we do have a ton of control over how type is displayed, rendered and positioned on the screen. But with great power comes great responsibility. At least you now have a few tools at your disposal to respond back to web designers who are stuck on the the precision of typographical design in the browser.

Comments

Sorry, but I find this to be well-intentioned but nearly incomprehensible. “…dialed down a bit…”? Here you are dealing with the concept of tight kerning (in almost invisible amounts) and you throw in a totally non-specific statement. How could I possibly interpret that to achieve the result you had in mind.

I also disagree with your kerning example. The original, in my opinion, is far easier to read than the one in which you expanded the kerning on two word pairs.

Your “crispness and legibility” has no examples. You merely show output styles of OS displayed at an unnaturally increased image size. This is of no value in learning how take advantage of this concept.

The SVG examples are completely unclear.

The use of Dorsa as an example of text with too little letter spacing is silly. Dorsa is NOT a text font; it is a display font. Using Dorsa in that manner is first-level mistake, not one of the second-level considerations you are dealing with. Then you changed the point size when you increased the letter space so that one is no longer comparing apples to apples.

While I agree that type on the web needs observation and consideration to improve its legibility, I don’t think you added anything to the argument and may, in fact, have caused more confusion than clarification.

As we say down south, “Just sayin’”

Hey Randy — I appreciate your feedback! I really do.

While a few of your points are more on the subjective side of things, you do have some interesting observations that are certainly worth addressing.

Your “crispness and legibility” has no examples.

I suppose there could be static screenshots of the difference and I’ll definitely look into that. At the same time, the support for those methods are null at the moment and it does not seem right to provide specific examples of something that cant be used in a production environment.

The SVG examples are completely unclear.

Is the side-by-side not clear enough? Having the code examples next to the output seems to be the most clear and concise way to illustrate the concepts.

The use of Dorsa as an example of text with too little letter spacing is silly.

I said as much in the post. I wanted something that dramatically showcased the difference.

I don’t think you added anything to the argument and may, in fact, have caused more confusion than clarification.

I’m not sure if the post was intended to be an argument but considerations of what to do with typography in specific situations. Having worked both on the design and the dev side of things, these are real-life scenarios I’ve found myself in and they are how I come to deal with them. It’s totally valid and cool if you have different approaches, but let’s at least keep the scope of the article in mind. And, if you have different scenarios or approaches, then definitely contribute them, as this post is not meant to be an exhaustive list of all situations — merely ones I’ve encountered. We can all learn from each other’s experience collectively rather than mine alone. :)

Илон Маск рекомендует:  Почему html 3 2
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL