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

Ответ 1

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

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

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

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

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

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

<div style="font-size:20pt;background-color:#bcd">

  VAST   <small>(normal)</small> 
  <br/>

  <span style="letter-spacing:-0.1em">VAST</span>  
  <small>(enhance perception)</small>
  <br/>

  <span style="letter-spacing:0.5em">VAST</span> 
  <small>(lost perception)</small>
  <br/>

  <!-- SIMULATE KERNING AT SPACED TEXT -->
  <div style="letter-spacing:6pt">
     SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT
  </div>

</div>

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

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

Ответ 2

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

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

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

Ответ 3

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

<p style="text-align: justify">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id
    nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam
    hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et
    risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti.
    Sed fringilla lobortis viverra.
</p>

Ответ 4

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

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

<h1>Hello World</h1>

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

Просто выполните:

$('h1').jerning("Wo", -0.1);

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

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

(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f,
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery);

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

Ответ 5

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

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

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

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

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

text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;

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

  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";

Ответ 6

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

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