Как использовать кернинг между двумя шрифтами в 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>

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

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

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

Answer 1

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

Фактические метрики текста немного неуловимы. Используя самый точный инструмент, который мы имеем в нашем распоряжении, холст, даже тогда вы можете только последовательно получить ширину (без библиотеки). Но ширина одинакова для символов, которые тоньше определенного размера (это характеристика семейства шрифтов). Ширина "1" и "2" являются одинаковыми в в шрифтах я проверил: Arial, Verdana, и времена: 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/#measure, все из которых, вероятно, будут сообщать и вычислять на основе той же «ограничивающей рамки», которая существует вокруг символов.

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