Font looks different in different browsers?

Question

I know there are many questions about different font rendering in different browsers. But I don't think this is because of rendering.

The website is wikipedia , When I open this in Chrome it looks like this :

As I open this in other browsers (Opera Firefox or even IE) ,it displays this font :

I wonder why the difference? I don't know much about fonts but I checked the CSS code it just define font-family: sans-serif; So is my chrome have something like default settings which I don't seem to find where to change?

PS: I don't find this difference when browsing other websites using Chrome, So How to avoid this difference when writing CSS?

Answer 1

Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.

In chrome, you can set the default fonts at chrome://settings/, under advanced settings.

In safari it is less easy, but I could find this post .

---

In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.

A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows: font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.

For reference, you could check out this website . It has a lot of standard font stacks you can use in your CSS.

Answer 2

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

Answer 3

Fonts compatibility should be differs from various browsers. The way to fix the issue is by using the google fonts or call the font extensions supported for various browsers.

@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 */
}

for more details See this link.