html - 在不同浏览器中使用 WordPress 字体

Question

因此，我了解到 Windows 版 Chrome 存在一个错误，会导致渲染效果不佳。 Opera 也是这样吗？为什么它不适用于 IE？

字体:http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville

嵌入:

wp_enqueue_style('fontbask', 'http://fonts.googleapis.com/css?family=Libre+Baskerville:400,500,700,400italic&subset=latin,latin-ext');

我尝试过的CSS

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 1px transparent;

结果:

浏览器版本:

歌剧19.0.1326.63 Chrome 32.0.1700.107 m 互联网浏览器 11.0.9600.16518 火狐26.0

我还尝试使用 font-face 来包含字体，结果完全相同。

@font-face {
    font-family: 'LibreBaskerville';
    src: url('fonts/LibreBaskerville-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我下载了字体@ http://www.fontsquirrel.com/fonts/libre-baskerville?q[term]=baskerville&q[search_check]=Y 在此屏幕截图中，它看起来并没有那么糟糕，但您可以在这里看到实时内容:http://www.citizen-science.at/wordpress/

我还发现了来自 http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville 的字体渲染得也很糟糕。所以看来是浏览器问题。

当我使用本地字体而不是 Google 字体时，IE 能够显示它，但 Opera 和 Chrome 仍然无法显示

Answer 1

Opera 在字体渲染方面存在问题。 this将帮助您找到解决方案。如果您不必使用 Google 字体，那么我推荐 this用于生成网络字体的网站。这在跨浏览器兼容性方面表现出色。

@font-face {
    font-family: 'libre_baskervilleregular';
    src: url('librebaskerville-webfont.eot');
    src: url('librebaskerville-webfont.eot?#iefix') format('embedded-opentype'),
         url('librebaskerville-webfont.woff') format('woff'),
         url('librebaskerville-webfont.ttf') format('truetype'),
         url('librebaskerville-webfont.svg#libre_baskervilleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

从 fontsquirrel 生成的网络字体。使用这个，这些将与包括 Opera 在内的跨浏览器兼容性一起工作。

祝你好运!