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

Question

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.

Answer 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