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

Question

I'm experiencing an issue with Safari where a block of text using webfonts (not sure webfonts are the issue) is wrapping differently in Safari than it is in any other browser. In this particular instance, we're designing these blocks to look like they're set to text-align: justify; but they're actually set to text-align: left; . text-align: justify; is undesired in this setting as it does a poor job of calculating the space between words.

Important things to know:

• As I mentioned, the layout uses webfonts. It doesn't matter which webfonts (I've reviewed hundreds and it happens for all).
• The entire page, including padding and font-size, uses viewport width (vw). The idea here is that the block of text scales equally for all browser sizes and retains it's layout, including rags.
  
  

A visual aid:

Details about the layout and dimensions:

• Frame 1: Safari desktop.
• Frame 2: Chrome desktop.
• Frame 3: Chrome at 50% opacity over Safari.
• Window width in this screenshot is 1220px .
• Left/right padding is padding: 0 calc(129 / 1220 * 100vw); which computes to 129px .
• That leaves the available content space of 962px .
• letter-spacing is set to 0 by default for all content.

So, anyone have any idea why Safari seems to have exaggerated tracking/letter-spacing?

---

EDIT

We just launched the site in question, so you can see the issue in action here: https://www.typography.com/fonts/hoefler-text/overview

Answer 1

Well, there's a bunch of stuff at play.

First of all Chrome and Safari use different defaults for rendering text, But in addition to that Chrome on different versions of MacOS or Windows will render text differently too because of how the system font rendering works.

You can typically make Safari and Chrome (on the same system) feel a bit closer by setting your text CSS to:

text-rendering: optimizeLegibility Since this is the default on Chrome but Safari defaults to optimizeSpeed

It might also be wise to explicitly set: font-feature-settings: "kern"; and font-smoothing: antialiased (note those both need vendor prefixes)

Next, make sure to specify a numeric font weight. Eg: font-weight: 400 for "regular". (The browsers might not pick the same weight for the normal/bold keywords)

Finally, make sure you're serving up the most optimized version of a webfont (Typekit & Google usually do this for you, but it's an issue if you're self-hosting the fonts)

---

Edit:

It might be worth forcing both Chrome and Safari to create a "compositing layer" (basically means its GPU accelerated). You can do that with backface-visibility: hidden . Though I suspect this is a MacOS specific thing and there may not be a solution in the browser.

Answer 2

Adding font-feature-settings: "kern"; to the element for the fonts solved my problem with Safari not rendering the letter-spacing properly.

Answer 3

I had the similar issue while building an html banner using a .woff font: Safari was applying an exaggerated tracking/letter-spacing. Bryce's suggestion to use font-weight: 400; fixed the issue .