quasarframework
On Windows Chrome, font-family: monospace; won't show as monospace font
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
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. 👏
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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:
@CNOCTAVE you can check actual rendered font in inspector in "computed" tab:
BTW Consolas font is avaliable on Windows too. Maybe Quasar can use Consolas, monospace instead of monospace.
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.
Your workaround sounds perfect, but web developer cannot force users changing their Chrome settings. I will add new bug to Chrome.
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)
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
codetag 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".
Since Chrome can explicitly specify MacOS fonts e.g. -apple-system, it definitely can explicitly specify monospace font e.g. Consolas as Windows workaround.