OSX Safari VS Chrome 字体渲染差异

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.50 像素到 150 像素之间），但与所有其他浏览器相比，它高达 165 像素，几乎多出 10%。由于我连续有几个元素，这种差异使得整个设计不适合 Safari...

我尝试过各种技巧，例如：- letter-spacing，word-spacing

这里建议的一切：Safari 字体渲染问题

但我找不到任何解决方案。我已经在以下环境中测试了该设计： - 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

乍一看有两种可能性：

1. Safari 不支持 otf 格式
2. Brandon 没有提供粗体或 700 版本的字体，浏览器会尝试模仿粗体版本，这可能会导致渲染结果有所不同。您可以尝试通过添加font-synthesis: none文本或提供字体的粗体版本来禁用它。