google-chromefontswebfontsgoogle-webfonts

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


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

  • 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