Blurry text in Chrome, any fix?
This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).
In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "super css hackers" to achieve some better/clearer rendering in some cases.
But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit developers fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.
Make font in Google Chrome clearer, sharper
I discovered that having 24' inch led display @1920x1200 is the problem. I opened page https://almsaeedstudio.com/themes/AdminLTE/index.html in laptop with 15,6' inch display with the same resolution 1920x1200 and the fonts are very clear and smooth.
I also went to store and tried to open page with Lenovo ThinkPad T560 which has resolution 2880x1620 and the fonts were also clear and smooth.
To have smooth and clean fonts monitor must have very high resolution. Went also to apple store and checked about their resolution: 3840x2160 -> therefore clean fonts
For now I solved it like this:
- set registry entry HKEY_CURRENT_USER > Control Panel > Desktop > FontSmoothing to value 1. Font looks sharper, clearer, readable (just as I want it). But this works only if web page uses Arial font.
installed Google Chrome Extension StyleBot with next css global style:
div, h1, h2, h3, h4, h5, h6, textarea
{
font-family: "Arial";
}
So every page I open renders with Arial font, which is very clear.
Bold Fonts in Google Chrome are Blurry (@Font-Face)
In the examples, you have declared only normal (regular) typefaces for Gotham and Sansation in @font-face
rules, yet try to use bold face. This makes browsers apply algorithmic (synthetic) bolding, with varying results.
The solution is to get bold typefaces and declare them, in @font-face
rules that have font-weight: bold
.
large text renders blurry in Firefox but sharp in Chrome
After testing several browsers (Chorm/Edge/Firefox) it seems that this is a Firefox specific problem (quirk? feature?) There is no proper workaround for your specific problem, -webkit-font-smoothing, -moz-osx-font-smoothing, font-smooth
have no effect.
When at all possible you could try using SVG text
in this case as SVG (probably) uses entirely different graphical routines and you can use the SVG text-rendering
attribute to tailor the crispiness (somewhat) to your needs.
Here a snippet with a comparison of plain HTML versus SVG text (need SO full-page view):
html, body, svg {
height: 100%; font-family: 'Arial';
}
#results {
font-size: 800px;
font-family: 'Arial';
}
<div id="results">0.68</div>
<svg viewBox="0 0 140 22" xmlns="http://www.w3.org/2000/svg">
<text y="12" text-rendering="geometricPrecision">0.68</text>
</svg>
Related Topics
Font Awesome 5 - Why Aren't Icons Like Bitcoin, Facebook, Twitter Showing
How to Include View/Partial Specific Styling in Angularjs
Css Background Opacity With Rgba Not Working in Ie 8
How to Dynamically Add a Class to Manual Class Names
Offset a Background Image from the Right Using Css
Ie Display: Table-Cell Child Ignores Height: 100%
Full-Screen Responsive Background Image
Css Specificity, Media Queries and Min-Width
How to Create Div to Fill All Space Between Header and Footer Div
How to Apply Multiple Background Colors With Css3
Expand Div from the Middle Instead of Just Top and Left Using CSS
How Does the CSS Specificity Work
What Bug Does Zoom:1; Fix in CSS
CSS Selector to Match an Element Without Attribute X
Css Text-Decoration Property Cannot Be Overridden by Child Element