Safari, line spacing with custom font

Question

Using the Dosis font from Google Webfonts ...

@import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800); 

after extensive testing in Firefox and Safari, realizing that I can never get around both browsers so that it looks absolutely fine, just like the original design looks in my photoshop, I came across the most disturbing problems

interval letter

No matter what I try, I cannot get the distance between letters directly in webkit browsers.

A simple example:

 .text-basic { font-weight: 200; font-size: 16px; letter-spacing: 0.52px; line-height: 22px; } 

It looks great the way I want it in Firefox (even better if I hacked FF into a font size of 15.5 pixels, which is fine [if anyone has an objection]).

However, in Safari, the distance between the letters simply will not work.

After some research, I found that it will not allow the distance between letters below 1px, but it is said that it does this if I use em measures. It will be so.

If I use before:

 letter-spacing: 0.0618em 

Nothing happens. Without changes. The spacing between the letters is too low.

But if I use:

 letter-spacing: 0.0619em 

Suddenly, it snaps, and the distance between the letters is too great. As a text block of 10 words suddenly takes up more than 50 extra pixels in width.

I do not understand.

Does anyone know how to fix this?

Thanks.

Answer 1

There is no correct solution to this problem. Safari / Webkit will not display these things correctly.

Another topic on similar issues can be found here.

Answer 2

I believe that safari is rounded to whole pixels, regardless of the device you use.

So the difference between 0.0618em and 0.0619em is the point where it is rounded from 0px to 1px.

If you notice that the space of letters is identical in safari using 0.0619em and 1px;

Unfortunately, I have no solution, but hopefully this will help explain what you see.

Answer 3

This is apparently caused only by svg fonts! Reorder the font urls by placing svg last, it should fix the problem. But svg fonts will not be used and rendering may be dirty (er)