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

前端之家收集整理的这篇文章主要介绍了CSS-为什么Safari的默认字体跟踪/字母间距与其他浏览器不同? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在Safari中遇到问题,其中使用webfonts的文本块(不确定是否是webfonts)在Safari中的换行方式与在其他浏览器中的换行方式不同.在这种特殊情况下,我们正在设计这些块,使其看起来像设置为文本对齐.但实际上将它们设置为text-align:left;.文本对齐:对齐;在此设置中是不希望的,因为它在计算单词之间的间隔方面做得很差.

重要事项:

>正如我提到的,布局使用webfonts.哪种webfonts无关紧要(我已经复习了数百种,所有情况都如此).
>整个页面(包括填充和字体大小)都使用视口宽度(vw).这里的想法是,文本块可以针对所有浏览器大小均等地缩放,并保留其布局,包括碎布.

视觉辅助:

enter image description here

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

>框架1:Safari桌面.
>框架2:Chrome桌面.
>框架3:Chrome浏览器的Safari浏览器的不透明度为50%.
>此屏幕截图中的窗口宽度为1220px.
>左/右填充为填充:0 calc(129/1220 * 100vw);计算得出129像素.
>剩下的可用内容空间为962px.
>默认情况下,所有内容的字母间距设置为0.

因此,任何人都知道Safari为什么似乎夸大了跟踪/字母间隔吗?

编辑

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

最佳答案
好吧,这里有很多东西在玩.

首先,Chrome和Safari使用不同的默认值呈现文本,但除此之外,由于系统字体呈现的工作原理,在不同版本的MacOS或Windows上的Chrome也会呈现不同的文本.

通常,通过将文本CSS设置为:可以使Safari和Chrome(在同一系统上)感觉更近一些.

文字渲染:optimizeLegibility,因为这是Chrome上的默认设置,但Safari默认为OptimizedSpeed

显式设置以下内容也很明智:font-feature-settings:“ kern”;和字体平滑处理:抗锯齿(请注意,两者都需要供应商前缀)

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

最后,请确保您提供的是Webfont的最优化版本(Typekit& Google通常会为您执行此操作,但是如果您是自托管字体,则是一个问题)

编辑:

可能有必要迫使Chrome和Safari都创建一个“合成层”(基本上意味着其GPU加速了).您可以使用背面可见性做到这一点:隐藏.尽管我怀疑这是MacOS特有的,并且浏览器中可能没有解决方案.

猜你在找的CSS相关文章