Chrome Helvetica Neue字体呈现的元素大小与Helvetica字体不同

jfewjypa 于 11个月前发布在 Go

关注(0)|答案(1)|浏览(119)

在JSFiddle中有两个简单的元素和CSS：

<span class="text">f</span><span class="text">fl</span>

个字符
当在Chrome中运行代码时，第一个跨度宽度覆盖了所有文本，而第二个跨度宽度为0。当我将字体更改为Helvetica时，两个跨度都有正确的预期宽度，适合其中的文本。
我的理解是，它在某种程度上与ffl | Latin small ligature有关，我的猜测是，前一种字体包含ffl连字，而后者没有。
有没有办法在使用“Helvetica Neue”时解决这个问题，并有选择地禁用某些Unicode字符的转换？或者我只需要使用不同的字体？
刚刚发现font-variant-ligature可能是一个解决方案。它对我来说并不明显，它会影响所有的连字，虽然。我需要解决这个问题，只是小拉丁连字。也就是说，这些Unicode字符：

U+FB00（）：ff
U+FB01（fi）：fi
U+FB02（）：fl
U+FB03（）：ffi
U+FB04（）：ffl

但不会影响任何复杂的语言，如日语，阿拉伯语等。

google-chrome

来源：https://stackoverflow.com/questions/77645610/helvetica-neue-font-renders-element-sizes-differently-than-helvetica

1条答案

按热度按时间

3pvhb19x1#

使spandisplay:inline-block

.text {
  display: inline-block;
}

.text, 
.text_old {
  background: radial-gradient(white, red);
  font-family: "Helvetica Neue";
  font-size: 40px;
}

个字符

赞(0）回复(0）举报 11个月前

我来回答

Chrome Helvetica Neue字体呈现的元素大小与Helvetica字体不同

1条答案

相关问题

热门标签

最新问答