Css 为什么是Safari’；默认字体跟踪/字母间距与其他浏览器不同？

我在Safari中遇到了一个问题，即使用webfonts的文本块（不确定webfonts是否存在问题）在Safari中的包装方式与在任何其他浏览器中的包装方式不同。在这个特定的例子中，我们将这些块设计成它们被设置为

text align:justify但它们实际上设置为
文本对齐：左<代码>文本对齐：对齐
在此设置中是不需要的，因为它在计算单词之间的间距方面做得很差

需要知道的重要事情：


正如我提到的，布局使用webfonts。使用哪种网络字体并不重要（我已经浏览了数百种，所有人都是如此）
整个页面（包括填充和字体大小）使用视口宽度（vw）。这里的想法是，对于所有浏览器大小，文本块的比例相等，并保留其布局，包括碎布。




视觉辅助工具：




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


第1帧：Safari桌面
框架2：Chrome桌面
第3帧：在Safari上以50%不透明度进行镀铬
此屏幕截图中的窗口宽度为
1220px
左/右填充为
填充：0计算（129/1220*100vw）计算为
129px

这就留下了可用的内容空间
962px
对于所有内容，
字母间距
默认设置为0

那么，有人知道为什么Safari似乎夸大了跟踪/字母间距吗




编辑

我们刚刚发布了这个有问题的网站，所以你可以在这里看到问题的实际情况：
嗯，有很多东西在起作用

首先，Chrome和Safari使用不同的默认值来呈现文本，但除此之外，不同版本的MacOS或Windows上的Chrome也会呈现不同的文本，这是因为系统字体呈现的工作方式不同

通过将文本CSS设置为：

文本呈现：优化易读性
，因为这是Chrome上的默认设置，但Safari默认为
优化速度

显式设置：
font功能设置：“kern”
和
字体平滑：抗锯齿
（请注意，它们都需要供应商前缀）

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

最后，确保您提供的是最优化的webfont版本（Typekit&Google通常会为您提供，但如果您自行托管字体，这是一个问题）


编辑：

强迫Chrome和Safari创建一个“合成层”（基本上意味着它的GPU加速）可能是值得的。您可以使用
背面可见性：hidden
来执行此操作。尽管我怀疑这是MacOS特有的东西，而且浏览器中可能没有解决方案
 添加
字体功能设置：“kern”到字体的元素解决了Safari无法正确呈现字母间距的问题。
如果我没有尝试，那就糟了。：/我会再给你一次机会，让你知道。希望有帮助。我还加了一些其他的东西来尝试。是的，没有骰子。这是一个有问题的网站：Bummer，除了其他东西，你还试过吗？看起来MacOS确实改变了系统级（Safari使用的）的文本呈现。Chrome是完全独立的，因此不会受到同样的影响。我们将所有的Web字体分为不同的样式，因此您不必指定
字体大小
。总是
font-weight:正常。顺便说一句，GIF是一种极好的方式来说明这个问题。我希望有更多的问题是这样问的！谢谢。：）我花了20分钟的时间把它们组合在一起，花了1分钟的时间写这篇文章。但我希望它能帮助其他人节省时间，试图弄清楚我到底在干什么。不得不说，不用跨浏览器比较，这个网站看起来真的很不错。这是一个很好的提醒，当涉及到字体系列时，“你得到的是你付出的”…谢谢！这解决了我在计算SVG中文本宽度时不考虑字符对紧排的问题。默认情况下，Chrome做到了这一点。这使得Safari的文本非常匹配。这是我的荣幸，@D.McG。！Safari的问题快把我逼疯了。很高兴这对你有帮助！干杯