I was reviewing a PR on a recent project. The code was put together by another developer. It looked great on her machine, but screwy on mine. We were comparing CSS and everything looked identical, but when sharing screenshots it was clear my computer had bigger fonts than hers. This was causing weird line breaking issues that screwed up the display while hers did not.
Using Chrome dev tools we determined that despite a font size of 9 in CSS, my screen was showing a font size of 14.
If you google around for this issue, you'll find a lot of posts that offer a CSS work around for this. Here is one. this work around is no longer supported in current browsers.
It turns out that Chrome allows the user to set a minimum font size.
Open up chrome://settings/fonts in your browser:
For some reason my minimum font size was set to 14. So, the CSS telling the font to be smaller was being ignored. I was able to push it back to a smaller level and that solved our main display issue.
I have no memory of ever changing this setting, so I'm not sure what happened, or why. But, problem solved and we can go on for another day.
posted by Jeffry Houser in
HTML5, Professional, chrome
| 0 Comments
