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

Question

我在Safari中遇到问题，其中使用webfonts的文本块（不确定是否是webfonts）在Safari中的换行方式与在其他浏览器中的换行方式不同。在这种情况下，我们将这些块设计为 look ，就像它们设置为 @Override public boolean onEditorAction(TextView v,int actionId,KeyEvent event) { if (actionId == EditorInfo.IME_ACTION_NEXT) { View next = holder.edtTxtQty.focusSearch(View.FOCUS_LEFT); if(TextUtils.isEmpty(holder.edtTxtQty.getText())) { next = holder.edtTxtQty.focusSearch(View.FOCUS_DOWN); } else { holder.edtTxtQty.requestFocusFromTouch(); next = holder.edtTxtQty.focusSearch(View.FOCUS_DOWN); } if(next!=null) { next.requestFocus(); } else { Utils.hideSoftKeyboard((Activity) context); } } if (actionId == KeyEvent.KEYCODE_ENTER) { Utils.hideSoftKeyboard((Activity) context); } return true; } }); ，但实际上是它们设置为text-align: justify;一样。 text-align: left;在此设置中是不希望的，因为它在计算单词之间的间隔方面做得很差。

要了解的重要事项：

• 正如我提到的，布局使用webfonts。哪种webfonts无关紧要（我已经审查了数百种，并且所有情况都发生了）。
• 整个页面（包括填充和字体大小）均使用视口宽度（vw）。这里的想法是，文本块可以针对所有浏览器大小均等地缩放，并保留其布局，包括碎布。
  
  

视觉辅助工具：

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

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

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

---

编辑

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

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代表“常规”。 （浏览器可能不会对普通/粗体关键字选择相同的权重）

最后，请确保您提供的是Webfont的最优化版本（Typekit和Google通常会为您完成此操作，但是如果您是自托管字体，这是一个问题）

---

编辑：

可能有必要迫使Chrome和Safari都创建一个“合成层”（基本上意味着其GPU加速了）。您可以使用backface-visibility: hidden来做到这一点。尽管我怀疑这是MacOS特有的，并且浏览器中可能没有解决方案。

Answer 2

在字体的元素中添加font-feature-settings: "kern";解决了Safari无法正确呈现字母间距的问题。