css - 为什么 Safari 的默认字体跟踪/字母间距与其他浏览器不同？

Question

我在使用 Safari 时遇到问题，其中使用 webfonts 的文本块（不确定 webfonts 是问题所在）在 Safari 中的包装方式与在任何其他浏览器中的包装方式不同。在这个特定的例子中，我们将这些块设计为看起来像是设置为text-align: justify;但实际上设置为text-align: left;. text-align: justify;在此设置中是不受欢迎的，因为它在计算单词之间的空间方面做得很差。

需要了解的重要事项：

• 正如我所提到的，布局使用 webfonts。哪个 webfonts 都没有关系（我已经审查了数百个并且它发生在所有人身上）。
• 整个页面，包括内边距和字体大小，都使用视口宽度 (vw)。这里的想法是，文本块对于所有浏览器大小均等缩放，并保留其布局，包括碎布。
  
  

视觉辅助：

有关布局和尺寸的详细信息：

• 框架 1：Safari 桌面。
• 框架 2：Chrome 桌面。
• 第 3 帧：Chrome 在 Safari 上的 50% 不透明度。
• 此屏幕截图中的窗口宽度为1220px.
• 左/右填充padding: 0 calc(129 / 1220 * 100vw);计算为129px.
• 这留下了可用的内容空间962px。
• letter-spacing对于所有内容，默认设置为 0。

那么，任何人都知道为什么 Safari 似乎夸大了跟踪/字母间距？

---

编辑

我们刚刚启动了相关网站，因此您可以在此处查看实际问题：https ://www.typography.com/fonts/hoefler-text/overview

标签： cssgoogle-chromesafariwebfontstypography

Answer 1

嗯，有很多东西在玩。

首先，Chrome 和 Safari 使用不同的默认值来渲染文本，但除此之外，由于系统字体渲染的工作方式，不同版本的 MacOS 或 Windows 上的 Chrome 也会以不同的方式渲染文本。

您通常可以通过将文本 CSS 设置为：让 Safari 和 Chrome（在同一系统上）感觉更接近：

text-rendering: optimizeLegibility由于这是 Chrome 上的默认设置，但 Safari 默认为optimizeSpeed

font-feature-settings: "kern";显式设置：和（注意它们都需要供应商前缀）也可能是明智的font-smoothing: antialiased

接下来，确保指定数字字体粗细。例如：font-weight: 400对于“常规”。（浏览器可能不会为普通/粗体关键字选择相同的权重）

最后，确保您提供的是最优化的网络字体版本（Typekit 和 Google 通常会为您执行此操作，但如果您是自托管字体，则会出现问题）

---

编辑：

强制 Chrome 和 Safari 创建一个“合成层”（基本上意味着它的 GPU 加速）可能是值得的。你可以用backface-visibility: hidden. 虽然我怀疑这是 MacOS 特有的事情，并且浏览器中可能没有解决方案。