Question

我有一个包含以下CSS规则的文本元素：

box-sizing:border-box;
color:rgb(38, 38, 38);
display:block;
float:left;
font-family:Brandon, sans-serif;
font-size:14px;
font-weight:700;
height:20px;
line-height:16.8px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
text-align:left;
text-size-adjust:100%;
visibility:visible;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

我的问题/问题是，虽然渲染的元素宽度在Safari上的浏览器（146.50px和150px之间）相当不变，但与其他所有浏览器相比，它高达165px，几乎增加了10％。由于我连续几个元素，这种差异使得整个设计不适合Safari ......

我尝试过各种各样的技巧： - letter-spacing，word-spacing

此处建议的所有内容：Safari font rendering issues

但我找不到任何解决方案。我测试了以下设计： - Firefox（Windows和Mac），Internet Explorer，Edge，Chrome（Windows和Mac），结果或多或少不变。 Chrome Mac与Windows的差异大约为1个像素。

Safari使这个项目变得更宽更好的原因是什么？有一种方法可以跨浏览器对其进行规范化（当然没有设置固定的宽度）

修改

@font-face {
 font-family: "Brandon";
 font-style: normal;
 font-weight: normal;
 src: url("../fonts/Brandon_reg.otf") format("opentype");
 }

Answer 1

乍一看有两种可能性：

Safari
没有提供大胆或700版本的Brandon字体，浏览器尝试模仿粗体版本，这可能会在渲染结果中有所不同。您可以尝试通过将font-synthesis: none添加到文本或提供字体的粗体版本来禁用它。

OSX Safari VS Chrome字体渲染区别

1 个答案: