On Windows Chrome, font-family: monospace; won't show as monospace font

[CNOCTAVE]

What happened?

On Windows Chrome, font-family: monospace; won't show as monospace font.

What did you expect to happen?

Change to font-family: courier, monospace; will be a good workaround.

Reproduction URL

http://cnoctave.cn/1/2.html

How to reproduce?

Visit http://cnoctave.cn/1/2.html

Flavour

UMD

Areas

Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

Relevant log output

Additional context

No response

[github-actions]

Hi @CNOCTAVE! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[FragsterAt]

On Windows Chrome, font-family: monospace; won't show as monospace font.

Looks like broken settings in chrome.
Go to chrome://settings/fonts and check your monospace font value.

In any case Courier is bad choice for hidpi screens.

On my system with default settings (Consolas) everything is ok:

[FragsterAt]

@CNOCTAVE you can check actual rendered font in inspector in "computed" tab:

[CNOCTAVE]

@FragsterAt

The actual rendered font is NSimSun.

[CNOCTAVE]

@FragsterAt

My Chrome monospace font value is "Default".

[CNOCTAVE]

BTW Consolas font is avaliable on Windows too. Maybe Quasar can use Consolas, monospace instead of monospace.

[FragsterAt]

The actual rendered font is NSimSun.

My Chrome monospace font value is "Default".

Default is "default system font". In all my chrome installations in windows default value for monospace font is Consolas, may be in chinese version it has another value.

IMHO quasar behavior is correct, just change your settings to real monospace font (i.e. Consolas). NSimSun is not monospace font, so you may have same issue on other sites with unstyled pre or code tags.

[CNOCTAVE]

Your workaround sounds perfect, but web developer cannot force users changing their Chrome settings.
I will add new bug to Chrome.

[FragsterAt]

web developer cannot force users changing their Chrome settings.
I will add new bug to Chrome.

If you sure, that your setting is real default setting and wasn't set by user, with group policies/script, etc.

as workaround - you can add style for code tag in app.css (quasar doesn't style it)

[CNOCTAVE]

web developer cannot force users changing their Chrome settings.
I will add new bug to Chrome.

If you sure, that your setting is real default setting.

as workaround - you can add style for code tag in app.css (quasar doesn't style it)

Yes, in that picture u can see the glyphs of the "Default" setting is NSimSun, which is not a monospace font.
We always meet some bugs which "works on my machine".

[CNOCTAVE]

Since Chrome can explicitly specify MacOS fonts e.g. -apple-system, it definitely can explicitly specify monospace font e.g. Consolas as Windows workaround.