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)
The output in Chrome looks suddenly crappy
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!
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.
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.
Antialiasing refers to the smoothing of jagged edges of drawn graphics and text to improve their appearance or readability.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With