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

Question

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

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

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

我想知道为什么会有区别？我不太了解字体，但是我检查了它刚刚定义的CSS代码font-family: sans-serif;那么我的chrome有默认设置，我似乎无法找到改变的地方吗？

PS：我在使用Chrome浏览其他网站时没有发现这种差异，那么在编写CSS时如何避免这种差异呢？

Answer 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不存在，也会选择浏览器设置的标准sans-serif字体。

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

Answer 2

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

Answer 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.