字体在不同浏览器中看起来不同？答案

【问题标题】：Font looks different in different browsers?字体在不同浏览器中看起来不同？
【发布时间】：2014-06-10 18:16:38
【问题描述】：

我知道有很多关于不同浏览器中不同字体渲染的问题。但我不认为这是因为渲染。

网站是wikipedia, 当我在 Chrome 中打开它时，它看起来像这样：

当我在其他浏览器（Opera Firefox 甚至 IE）中打开它时，它会显示这种字体：

我想知道为什么会有差异？我对字体不太了解，但我检查了它刚刚定义的 CSS 代码font-family: sans-serif; 那么我的 chrome 是否有类似默认设置的东西，我似乎找不到在哪里更改？

PS：我在用Chrome浏览其他网站的时候没有发现这个区别，那么在写CSS的时候如何避免这个区别呢？

【问题讨论】：

标签： html css google-chrome fonts

【解决方案1】：

因为设置了font-family: sans-serif;，所以每个浏览器都设置了自己的标准字体。这在不同的浏览器之间当然会有所不同。

在 chrome 中，您可以在 chrome://settings/ 的高级设置下设置默认字体。

在 safari 中不太容易，但我可以找到 this post。

作为对您的编辑的反应，您应该始终在 CSS 中定义一个字体堆栈，以确保显示正确的字体。

字体堆栈是字体的堆栈，用于定义要选择的不同字体。它看起来如下： font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

这将 Arial 定义为标准字体。然而，如果没有找到 Arial，则选择 Helvetica Neue。如果该字体也不存在，则设置 Helvetica。在极不可能的情况下，即使 Helvetica 不存在，也会选择由浏览器设置的标准无衬线字体。

作为参考，您可以查看this website。它有很多可以在 CSS 中使用的标准字体堆栈。

【讨论】：

【解决方案2】：

每个浏览器都可以选择要显示的字体在 chrome 中，您必须转到设置并单击“显示高级设置”或类似的东西才能找到内容显示调整菜单

【讨论】：

【解决方案3】：

字体兼容性应该因各种浏览器而异。解决问题的方法是使用谷歌字体或调用各种浏览器支持的字体扩展。

@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

更多详情See this link.

【讨论】：