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

Posted 2023-03-15

【中文标题】在不同浏览器中使用 Wordpress 字体

【英文标题】：Using fonts with Wordpress in different Browsers

【发布时间】：2014-03-15 04:10:43

【问题描述】：

因此，我了解到 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 仍然不能显示

【问题讨论】：

能具体说说opera版本吗？

正如@Zeshan Khan Alvi 所说，什么版本的Opera？使用 Presto 引擎的旧版本（不再获取更新）还是使用 Webkit 引擎的新版本 Opera Next？

我更新了我的问题

【参考方案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 在内的跨浏览器兼容性一起使用。

祝你好运！

【讨论】：

我其实是在fontsquirrel下载了字体，但还是有问题。所以 Opera 有我无法修复的错误？

@4ndro1d 您使用的是哪个歌剧版本？

@4ndro1d 您发布的 css 代码只有一种字体格式...其余的在哪里？您必须传递不同的格式，如 otf、ttf、svg 将它们转换为 font squirrel 并使用它们...

检查这个希望你能找到一些东西，***.com/questions/3245141/…

因为我使用的是 .otf 字体，它是从 fontquirrel 下载的，我想我做对了吗？我对 IE 没有任何问题，只有 Chrome 和 Opera 有问题