在不同浏览器中使用 Wordpress 字体

Question

因此，我了解到 Chrome for Windows 上存在导致渲染效果不佳的错误。 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 铬 32.0.1700.107 m Internet Explorer 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 fonts 不是您必须使用的，那么我推荐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 在内的跨浏览器兼容性一起使用。

祝你好运！