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

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 中定义字体堆栈，以确保显示正确的字体。

字体堆栈是字体的堆栈，用于定义要选择的不同字体。它看起来如下: 字体系列:Arial、“Helvetica Neue”、Helvetica、sans-serif；

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

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