Improve font icon management, sizing and sharpness #493
Conversation
astorije
added
the
Type: Feature
|
Nice, LGTM 👍 . |
|
Looks all good to me, just look at my comment and then 👍 |
| .context-menu-item:before { | ||
| font: normal normal normal 14px/1 FontAwesome; | ||
| font-size: inherit; /* Can't have font-size inherit on line above, so need to override */ | ||
| -webkit-font-smoothing: antialiased; |
There was a problem hiding this comment.
If we could put subpixel-antialiased there instead it would be pretty great. On my computer it makes a small but noticable difference by making the icon slighly more sharp.
There was a problem hiding this comment.
Actually, we cannot: subpixel-antialiased is what is used by default by browsers. So setting it here on icons would kill the point of this PR and go back to ugly rendering :D
Also, note that this is what's used by the Font Awesome CSS, so I'm happy to trust them on this one. As a matter of fact, it's been attempted at different occasions by them or their contributors, see:
- Modified To Retro-Fit Support For Newer Text Rendering Optimizations FortAwesome/Font-Awesome#3136 (comment)
- Icons look ugly in Firefox on Mac OSX FortAwesome/Font-Awesome#1591 (comment)
- Pixel perfect with font-smoothing: antialiased FortAwesome/Font-Awesome#611
- etc.
Also, this is what Bootstrap does in their CSS for their icons.
This makes all icons look sharper, and reproduces what is applied on the FontAwesome CSS: https://github.com/FortAwesome/Font-Awesome/blob/4213679/css/font-awesome.css#L19-L20
This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
- Transition on the search icon was removed, because why was it even here?! - A transition was added to the "Play sound" button - Transition on the Send button is now consistent with the others
astorije
force-pushed
the
astorije/improve-fonts
branch
from
11c9696 to
e3d80d4
Compare
|
@maxpoulin64, ping on my answer to your comment? Are you good to go with this PR? |
Improve font icon management, sizing and sharpness
I was hoping to make a dead-simple PR to fix the icon blurriness (well, at least on a Mac OS with Retina, not sure how it looks otherwise), but I ended up spending waaaay too much time on this and also improving sizing, management, and some transitions.
Changes
From the commit messages:
This makes all icons look sharper, and reproduces what is applied on the FontAwesome CSS
fontstatement is now the same as official FontAwesome CSSResults
Note that these are are screenshots from Chrome 51 on Mac OS X El Cap with Retina, but I noticed extremely similar (if not identical) results with Firefox on the same machine.
Let me know if you see different results on other OS.