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