Blurry Font in H1 in Chrome

[robotrono]

https://i.imgur.com/TiEvmPR.png in Firerfox works fine, its normal?

[BcRikko]

Thanks 🙇

It seems to be no problem to me. 🤔 please let me know about your environment. 🙏

my environment

• macOS High Sierra
• Chrome 70
• Firefox 63

[jjspace]

This is related to #40, #72, #75. It has to do with the font-smoothing property and how it's handled on different systems/browsers. @robotrono what OS are you on?

[robotrono]

@jjspace @BcRikko

I'm using Windows 10, Chrome 71 and Firefox 63 64 bits.

[jjspace]

Right so as I mentioned in my PR pertaining to this, according to caniuse the font-smoothing property only applies on OSX platforms so won't change anything on other platforms. In my quick testing on my windows machine it doesn't seem like the font smoothing works. However I also dont have a super high res/retina monitor so I might not even be able to see it.

[abdallahalsamman]

@robotrono I can't reproduce this issue on: Ubuntu FF 63 64bit OSX FF 63 64bit OSX Chrome 70 64bit

[abdallahalsamman]

Win10 FF 63

[abdallahalsamman]

@robotrono can you please try to reproduce the bug on the latest develop branch?

[robotrono]

@evexoio I need npm right?

[abdallahalsamman]

Yes, Here's a step by step to get your css

git clone https://github.com/nostalgic-css/NES.css.git
cd NES.css
npm install
npm run build

then you'll find your css in css/nes.min.css

[sandrosc]

Setting font-weight: normal; makes the font a lot less blurry (Windows 10, Chrome 71). Apparently the font has no bold style. Perhaps we can use both properties, font-weight and font-smoothing.