如何在 CSS 中的两种字体之间使用字距调整？答案

【问题标题】：How to use kerning between two fonts in CSS?如何在 CSS 中的两种字体之间使用字距调整？
【发布时间】：2016-05-04 12:13:42
【问题描述】：

我想在两种字体之间添加适当的字距调整。具体来说，我目前有（两个例子）：

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”显然看起来更大（当我更改字体粗细/系列/样式时，有时会显得更加明显）。

鉴于在我的示例中数字和“x”在不同的divs 中，我不怀疑有任何方法可以做一些神奇的字距调整。但是，是否有任何简单的纯 CSS 方法来适当地减少给定字体/数字的右侧空格？

我现在唯一的解决方案是使用 javascript 调整每个数字（我可能只需要调整数字“1”）。但是，我怀疑如果我更改字体，这可能会中断 - 我不想重新调整。

【问题讨论】：

你可以将 span 用于内联元素而不是 div 吗？
没有万能的解决方案，因为这是字体本身的问题，而不是 CSS。最好的办法是查看letter-spacing 属性。
@DanielA.White 认为我可以使用跨度，或者最坏的情况，一个 div 中的两个跨度。
@RobertAKARobin 字母间距是我要使用的，但使用 javascript，每个数字任意选择。
你试过font-kerning: off吗？

标签： javascript html css fonts kerning

【解决方案1】：

tl;dr; 可能不值得在代码中付出努力，我只需为该特殊实例应用一个类或按内容搜索元素，在 jQuery 中它可能看起来像 $('.hw_count p:contains("1")');并为此设置一个特殊的类。

实际的文本指标有点难以捉摸。使用我们可以使用的最精确的工具，画布，即使这样，您也只能始终如一地获得宽度（没有库）。但是，对于比某个尺寸更细的字符，宽度是相同的（这是字体系列的特征）。我测试的字体中“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/#measure 所有这些都可能会根据字符周围存在的相同“边界框”进行报告和计算。

您也许还可以从画布生成图像，然后测量实际像素，但是，这样做是为了一点收获。

【讨论】：