html - 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...

我试过各种技巧，比如: - 字母间距, 字间距

此处建议的所有内容: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

乍一看有两种可能性:

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