Enable subpixel hinting for fonts in the documentation
nilslindemann opened this issue · 0 comments
nilslindemann commented
If you apply these styles to the docs, then the fonts will look sharper:
html {
background: white;
}
/* Just using '*' has unwanted side effects on the search entry. */
.md-container, .md-container *,
.md-header__inner,
.md-header__title, .md-header__title *,
.md-header__source, .md-header__source * {
background: inherit;
}
/* Also enables subpixel-rendering for the heading in the menu on the left side */
.md-nav--primary .md-nav__title {
box-shadow: revert;
}
The fonts will look sharper due to subpixel hinting. Chrome will (can?) only use subpixel hinting, when the background of the layer containing the font is non-transparent. Therefore, I set the background of the html element to white and let the child elements inherit it (which may be too intrusive, I have not extensively tested it).
Here is a screenshot, I hope you can see the effect.