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)

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!

回答1:

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.

来源：https://stackoverflow.com/questions/12646592/webkit-font-smoothing-suddenly-different-results-in-chrome-and-safari