我想在两种字体之间添加适当的字距调整。具体来说,我目前有两个示例:



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'位于不同的div中,所以我不怀疑有任何方法可以做一些神奇的字距调整。但是,是否有任何简单的仅CSS方式来减少给定字体/数字的正确空白?

我目前唯一的解决方案是对每个数字进行javascript调整(我可能只需要对数字“ 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所示,所有这些库都可能根据字符周围存在的相同“边界框”进行报告和计算。

您也许还可以从画布上生成图像,然后测量实际像素,但是这样做可以增加一些收益。

关于javascript - 如何在CSS中的两种字体之间使用字距调整?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35039140/

10-12 12:16
查看更多