Why The Same Font At Different Web Brower Have Different Looks?

Contents hide

1 why the same font at different web brower have different looks?

Problem Description:

picture
I found that the font ‘monospace’ have diferent styles at my Chrome and Brave web browser. Can someone tell me why?
I also checked my Microsoft Edge, it has the same style as Brave.

I think they are all based on the chromium, so i dont know why my chrome have a different styles of the ‘monospace’ And i have checked my extensions, they have nothing to do with this question.

Solution – 1

This is caused by different language settings.

The left example renders the NSimSun font.
The right one shows the NSimSun.

Keep in mind font-family: monospace translates to:
"use any available monospaced font – suitable for the current text/encoding"

body{
  font-size:2em;
  font-family:  monospace
}

.consolas{
    font-family: Consolas, monospace
}

  <ul>
    <li lang="zh">Chinese (zh): font test<span>你好</span></li>
    <li>Chinese (no lang): font test<span>你好</span></li>
    <li>French: <span lang="fr">Bonjour</span></li>
    <li lang="ja">Japanese: <span lang="ja">今日は</span></li>
    <li lang="ko">Korean: <span lang="ko">안녕하세요</span></li>
  </ul>

  <ul class="consolas">
    <li lang="zh">Chinese (zh): font test<span>你好</span></li>
    <li>Chinese (no lang): font test<span>你好</span></li>
    <li>French: <span lang="fr">Bonjour</span></li>
    <li lang="ja">Japanese: <span lang="ja">今日は</span></li>
    <li lang="ko">Korean: <span lang="ko">안녕하세요</span></li>
  </ul>

For a consistent font rendering, just add a specific font family name like

font-family: Consolas, monospace

Rate this post