【发布时间】：2019-09-27 15:00:13
【问题描述】：
我在使用 Safari 时遇到问题，其中使用 webfonts 的文本块（不确定 webfonts 是否存在问题）在 Safari 中的换行方式与在任何其他浏览器中的换行方式不同。在这个特定的例子中，我们将这些块设计为看起来，就像它们设置为text-align: justify;，但实际上它们设置为text-align: left;。 text-align: justify; 在此设置中是不受欢迎的，因为它在计算单词之间的空间方面做得很差。
需要了解的重要事项：
- 正如我所提到的，布局使用网络字体。哪种网络字体都没有关系（我已经审查了数百个，而且所有人都会遇到这种情况）。
- 整个页面，包括内边距和字体大小，都使用视口宽度 (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
【问题讨论】：
-
顺便说一句，GIF 是说明问题的绝佳方式。我希望以这种方式提出更多问题！
-
谢谢。 :) 我花了 20 分钟把它放在一起，用 1 分钟写这篇文章。但我希望它可以帮助其他人节省时间来弄清楚我到底在做什么。
-
不得不说，如果没有跨浏览器比较，该网站看起来确实不错。这是一个很好的提醒，当涉及到字体系列时，“一分钱一分货”......
标签： css google-chrome safari webfonts typography