Google Webfont 在 Safari 中比在 Chrome、IE 和 Firefox 中显示得更粗、更断断续续

Question

我似乎遇到了一些人在这里遇到的问题。

这是交易。 http://www.mb-events.de/wordpress/ 在 IE、Chrome 和 Firefox 上呈现出色。但是在 Safari 上，价格和推荐等信息显示不同，我就是找不到原因。我为此使用的 Google Webfont 是 'Cabin'。我会 post 进行并排比较，但由于是新手所以不能。

我尝试设置不同的后备字体并搜索 Safari 是否不喜欢 Google 一般的 Webfonts。

我的CSS是

.entry, .entry p {
font: 300 15px/1.5em 'Cabin', arial, sans-serif;
}

Answer 1

您是否尝试移动您调用的网络字体的堆叠顺序。我一直发现将 svg 类型添加到堆栈顶部总是有助于保持可读性。

举个例子：

@font-face {
    font-family: 'encode_widelight';
    src: url('encode-sans/encodesanswide-300-light.eot');
    src: url('encode-sans/encodesanswide-300-light.eot?#iefix') format('embedded-opentype'),
         url('encode-sans/encodesanswide-300-light.svg#encode_sans_widelight') format('svg'), /* Place your svg font here */
         url('encode-sans/encodesanswide-300-light.woff') format('woff'),
         url('encode-sans/encodesanswide-300-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

您也可以尝试为 css:

添加字体平滑

html {
    -webkit-font-smoothing: antialiased;
}

Google Webfont 在 Safari 中比在 Chrome、IE 和 Firefox 中显示得更粗、更断断续续

Google Webfont shows up bolder and choppier in Safari than in Chrome, IE and Firefox

css

safari

fonts

google-chrome