为什么Safari的默认字体跟踪/字母间距与其他浏览器不同？
我遇到了一个Safari的问题，在Safari中使用webfonts的文本块(不确定webfonts是不是问题)在Safari中的换行方式与在任何其他浏览器中都不同。在本例中，我们将这些块设计为看起来像是设置为text-align: justify;，但实际上设置为text-align: left;。在这种设置中，text-align: justify;是不受欢迎的，因为它在计算单词之间的间距方面做得很差。
要知道的重要事情：
- 如前所述，布局使用webfonts。
- 整个页面，包括填充和字体大小，使用视窗宽度(vw)。这里的想法是，文本块对于所有浏览器大小都是等比例缩放的，并保留其布局，包括碎布。
A可视化辅助工具：
有关布局和尺寸的详细信息：
Chrome padding Frame 1: Safari desktop.
- Frame 2: Chrome desktop.
- Frame 3: Chrome在此屏幕截图中是Safari.
- Window宽度上50%不透明的Chrome是
1220px.
- Left/right padding is
padding: 0 calc(129 / 1220 * 100vw);，它计算129px.
- That #en5#所有内容的可用内容空间默认设置为0。
那么，有没有人知道为什么Safari似乎有夸大的跟踪/字母间距？
编辑
我们刚刚启动了有问题的站点，所以您可以在这里看到问题的实际情况：https://www.typography.com/fonts/hoefler-text/overview
回答 3
Stack Overflow用户
发布于 2019-05-10 02:42:18
好吧，有一堆东西在起作用。
首先，Chrome和Safari使用不同的默认值来渲染文本，但除此之外，不同版本的MacOS或Windows上的Chrome也会呈现不同的文本，因为系统的字体渲染工作方式不同。
通过将文本CSS设置为：，通常可以使Safari和Chrome (在同一系统上)感觉更接近一些
text-rendering: optimizeLegibility，因为这是Chrome的默认设置，但Safari默认为optimizeSpeed
显式设置：font-feature-settings: "kern";和font-smoothing: antialiased也可能是明智的(请注意，这两者都需要供应商前缀)
接下来，确保指定数字字体粗细。例如：font-weight: 400代表“常规”。(浏览器可能不会为正常/粗体关键字选择相同的权重)
最后，确保你提供的是最优化的webfont版本(Typekit和Google通常会为你做这件事，但如果你是自托管字体，这会是一个问题)
编辑：
强制Chrome和Safari创建一个“合成层”(基本上意味着它的GPU加速)可能是值得的。你可以用backface-visibility: hidden做到这一点。虽然我怀疑这是特定于MacOS的事情，但浏览器中可能没有解决方案。
Stack Overflow用户
发布于 2020-06-19 23:53:47
将font-feature-settings: "kern";添加到字体元素解决了我的Safari不能正确呈现字母间距的问题。
Stack Overflow用户
发布于 2021-09-03 16:17:52
在使用.woff字体构建html横幅时，我遇到了类似的问题: Safari应用了夸张的跟踪/字母间距。Bryce建议使用font-weight: 400; 解决了的问题。
https://stackoverflow.com/questions/56065099
复制相似问题
腾讯云开发者
