All geek questions in one place

Different displays of the same fonts among browsers

I have a problem where the same font (same name and font size) looks different between Internet Explorer and Firefox (as well as Chrome and Safari).

This is what IE9 looks like (hope this detail is tall enough to show that the font is thicker / has a higher weight than it should): enter image description here

This is what Firefox looks like, etc. enter image description here

Is there a CSS reset that will get some font uniformity among browsers? Maybe hack IE?

Here is the simple HTML for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- body { color: RGB(102,102,102); font-size: 13px; font-family: "Arial", "Helvetica", serif; } --> </style> </head> <body> <p>Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa...</p> </body> </html>
+4
source share
4 answers

No, there is no CSS reset or trick or hack that can make all browsers display fonts the same. The same font is displayed differently in different browsers. Even the same font in one browser may look different on different systems.

CSS reset will help make the default settings more consistent, which could help if it were, for example, a heading header, where some headers are highlighted in bold by default, while others are not, and the default values ​​are slightly different between browsers. This may not help when size and weight are given.

You can make a hack so that it looks the way you want it in a particular browser, but all users of this browser may not need it. While this may look better for some, it may make it look worse for others.

Note: I noticed that you are using serif as a backup for Arial and Helvetica . You would like to use sans-serif to make it look more similar when using backup.

One more note: I see that you use comments inside style tags, which was useful only for browsers that did not understand CSS at all, such as Internet Explorer 1.0.

+5
source

Try this little trick, it may or may not work depending on the type of font, i.e.: custom font

.. from html5bolierplate

 html{ font-size:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-stroke: 0 0 0 transparent; }
0
source

Browsers usually have different font rendering (as well as almost all). You should try using CSS reset. Eric Meyer has one , YUI has one , as well as several other frameworks. for specificity, you should look for either "reset" (which resets all styles) or "basic" (provides a normalized style)

0
source

There is a chance that this is a problem with the font. Try adding something like:

 p { font-weight: 400; }
0
source

Source: https://habr.com/ru/post/1400931/

More articles:


All Articles