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

Question

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

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

Answer 1

Некоторые управления на кернинг может быть достигнуто в CSS с помощью the letter-spacing attribute.

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

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

Answer 2

Типографическое выравнивание как влево, так и вправо называется оправданием. Кернинг больше связан с настройкой пробелов между буквами и не имеет особого отношения к выравниванию (потому что оправдание текста - это более удобная настройка пробелов между словами, чем символы). Во всяком случае, вы хотите установить 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> 

Answer 3

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

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

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

только специфические шрифтов, как OpenFonts, have this property.

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> 

См above example here.

---

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

Answer 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); 

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

Answer 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"; 

Answer 6

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

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