Как использовать кернинг между двумя шрифтами в CSS?

Question

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

div.hw_count {
    display: inline-block;
    vertical-align: middle;
}
div.hw_count p {
    font-style: italic;
    font-family: Arial;
    font-size: 80px;
}
div.hw_count_separator {
    display: inline-block;
    vertical-align: middle;
}
div.hw_count_separator p {
    font-family: Arial;
    font-size: 30px;
}

<div class="hw_count"><p>1</p></div>
<div class="hw_count_separator"><p>x</p></div>

<span style=padding:20px></span> <!-- just to space examples apart -->

<div class="hw_count"><p>2</p></div>
<div class="hw_count_separator"><p>x</p></div>

Проблема в том, что я хотел бы, чтобы интервал между числом и знаком "x" выглядел одинаково для всех цифр. Это ясно выглядит больше для числа "1" (и иногда кажется еще более отчетливым, когда я изменяю вес шрифта / семейство / стиль).

Я не подозреваю, что есть какой-то способ сделать магический кернинг, учитывая, что в моем примере цифра и "х" находятся в разных div s. Но есть ли какой-нибудь простой способ только CSS уменьшить правильное пустое пространство соответствующим образом для данного шрифта / цифры?

Мое единственное решение сейчас было бы настроить с javascript для каждой цифры (вероятно, мне нужно настроить только для цифры '1'). Тем не менее, я подозреваю, что это может сломаться, если я поменяю шрифты - я бы не хотел менять настройки.

Answer 1

ТЛ; др; вероятно, не стоит усилий в коде, я бы просто применил класс для этого особого экземпляра или поиска элемента по содержимому, в jQuery это может выглядеть $('.hw_count p:contains("1")'); и установить специальный класс для этого.

Фактические текстовые метрики немного неуловимы. Используя самый точный инструмент, который есть в нашем распоряжении, canvas, даже тогда вы можете только последовательно получать ширину (без библиотеки). Но ширина одинакова для символов, которые тоньше определенного размера (это характерно для семейства шрифтов). Ширина "1" и "2" совпадают в шрифтах, которые я тестировал: Arial, Verdana и Times: http://codepen.io/anon/pen/zrjxQM

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = '80px Arial';

var text = ctx.measureText("1");
console.log('1: ' + text.width);

text = ctx.measureText("2");
console.log('2: ' + text.width);

text = ctx.measureText("M");
console.log('M: ' + text.width);

text = ctx.measureText("10");
console.log('10: ' + text.width);

Приведенный выше код дает:

1: 44.4921875
2: 44.4921875
M: 66.640625
10: 88.984375

Атрибуты, которые могут помочь, являются actualBoundingBoxRight и actualBoundingBoxLeft, но они поддерживаются только в Chrome экспериментально: https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics и даже тогда, я подозреваю, они сообщат об одном и том же как указано выше.

Вы также можете попробовать библиотеку, такую ​​как http://fabricjs.com/docs/fabric.Text.html или чистое решение JS, как показано здесь http://galacticmilk.com/journal/2011/01/html5-typographic-metrics/ все из которых, скорее всего, будут сообщать и рассчитывать на основе того же "ограничивающего прямоугольника", который существует вокруг символов.

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