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

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.

CodePudding user response：

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 >
    <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