Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webkit-font-smoothing: suddenly different results in chrome and safari

I used to have the same output in both webkit browsers (Chrome & Safari) but suddenly (and I don't know what I could have changed the rendering in Chrome looks crappy.

this is my html

<li class="cat-item term term-workshops"><a href="/workshops">Workshops</a></li>

and this is my css

.term a {
    display:inline-block;
    height:1em;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-smooth:always;
}

.term-workshops a {
    text-transform:lowercase;
    font-family:"Custom-Family", sans-serif;
    font-size:1.4em;
    margin-top:.1em;
}

The output in Safari looks good (it used to look the same in Chrome)

SAFARI

The output in Chrome looks suddenly crappy

SAFARI

Any idea of why that could make a difference in both webkit browsers? I know it looks crappy in Firefox since there is no font-smoothing option, but it should look the same in Chrome and Safari if possible.

What could I have been able to change in my css that the output looks suddenly different? I know it looked the same in both browsers!

like image 861
matt Avatar asked Sep 28 '12 19:09

matt


People also ask

Should I use WebKit font smoothing?

If you're design is placing text onto a dark background then you have a good reason to look towards using the WebKit and Firefox prefixed font-smoothing options to make the text look lighter, but you should be warned that these only work on Mac and OSX and leaves the billions of other users with a sub-standard view.

How do I make my font look smoother?

Open the Control Panel. Double-click the Display icon. In the Display menu, click the Effects tab and check the box on smooth edges on-screen fonts. After that, click Apply and then click Ok.

What is anti aliasing font?

Antialiasing refers to the smoothing of jagged edges of drawn graphics and text to improve their appearance or readability.

What is font smoothing on Mac?

If your Mac is running macOS Big Sur, you may have noticed the blurry text. This could be due to the Font Smoothing feature, turned on by default since the Big Sur update. According to Apple, Font Smoothing (or “antialiasing”) reduces jagged edges for some fonts. It promises to reduce strain on the eyes while reading.


1 Answers

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/0vqp1bnkaoE

-webkit-font-smoothing no longer works. Google Chrome team intentionally changed this behavior. Seems font-smoothing wasn't applied "properly" on OSX in previous versions.

like image 151
Giona Avatar answered Oct 06 '22 00:10

Giona