1

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

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鉴于在我的示例中，数字和“x”在不同的 s中，我不怀疑有任何方法可以做一些神奇的字距调整。但是，是否有任何简单的纯 CSS 方法来适当地减少给定字体/数字的正确空格？

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

4

1 回答 1

1

tl;博士; 可能不值得在代码中付出努力，我只是为该特殊实例应用一个类或按内容搜索元素，在 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所有这些都可能会根据字符周围存在的相同“边界框”进行报告和计算。

您也许还可以从画布上生成图像，然后测量实际像素，但是，这是为了一点点收益而做的这么多工作。

于 2016-01-27T14:42:51.687 回答