Change font size of an element depending on browser (HTML, CSS)
I'm trying to make a simple website (I'm not good with HTML/CSS at all).
I have a certain element that looks good in Firefox but huge in Chrome. So I would like to set the font-size to 2.3em in Firefox and 1.6em in Chrome.
I know there are browser prefixes that work for animations etc., so I'm trying something like this:
However, that makes the font size look good in Chrome and tiny in Firefox. Is there any way to select the font size automatically, depending on which browser is used? Thanks in advance
There are 3 units you can choose for font-size :
1)px - tells the browser how many pixels the letter should be. I would highly recommend you to use this
2)% - tells the browser how big the font size should be w.r.t parent element
3)em - it scaled the font size by x of the parent font size. In short the value will get multiplied by parent size.
Now every browser has it's default font size.
For Firefox it's 16. (Menu -> Options -> Language and Appearance)
For chrome it's medium.(Settings -> Appearance)
Now if you put font-size as 6em,
Then in Firefox it will be like 16*6
And in chrome the 6 will get multiplied by Chrome's default size.
Using px will display the font having same size in both chrome and firefox
To control appearance across browsers, I would use a reset so you don't have to worry (as much) about the user agent stylesheet. Meyer reset is an old one but good one until you're ready to make your own.
From experience, I personally think you should set the font size for the document in px and use em for the fonts in elements / components so that it is all relative and responsive. When devs fix the font size to px, they are basically saying, "I want users to see exactly this," which can be problematic for people who rely on being able to adjust the font sizes at the browser level to read content, etc.
While I'm not a huge fan of the 62.5% rule, it's important for historical reasons and just so you're aware of the font sizing philosophies out there so you can choose your own.
Bohdan Thank you! I changed it to
because this website says that the non-prefixed version should be last: http://css-snippets.com/browser-prefix/
But now both browsers seem to choose 40px and it actually makes no difference which values I use for -moz-font-size and -webkit-font-size...
Rishi Anand Thank you, I didn't know about the different default sizes.
Now my problem is that I used em everywhere in the website and when I start to use absolute sizes in px for one element now, the element will still be too large/small in relation to the other elements (I hope that makes sense), so I'm trying to make it a little smaller in Chrome than in Firefox. But changing the size in px dependent on the browser with -moz-font-size doesn't seem to work 😩
But maybe it's best to change the whole site from em to px
Try to include whatever the webpages you produce with normalise.css.
Normalize.css reset browsers default setting and makes crossed browsers render all elements more consistently.
To include normalize, you just need to add
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
inside your head tag
DO NOT define different font size for different browsers, use a single font size that defined on body tag. And for the rest of the elements, ONLY USE em to adjust the their font size and dimension width or height of the elements.
This is how professional web developers make consistency of their web pages in all browsers.
A note on em:
Please do not confuse em with ex or rem units. Em represents the full font height (relative to parent), ex represents the x height.
I prefer to use ex when dealing with distances of decorative elements from text, e.g. bullets in ul or numbers/letters in ol, depending on the look of the font. Ch units are generally more appropriate for the examples listed though, since it is width-based (again, depending on the look of the font).
Rem is em except it is relative to the root element instead of the parent, which negates (overrides?) cascading benefits.
Hello~ it's me again~
I come back with all the above three parts put into code playground
Conclusion: only the third way works (seems, didn't check in a Firefox). Sorry again for the wrong answer of method 1 and 2.
Anna me neither have core knowledge in webpage cascading but this question helped me to research on font sizes and found this article.
How To Avoid Browser Font Incompatibility?
Knowing which browsers support a font family is one thing and making them support is another. So to make sure that your font family is rendered properly in every browser even if the user doesn’t have the font family installed on his local computer is to use @font-face in CSS style.
Addition of @font-face allows a webpage to download the font from the hosted location and display it in the CSS as specified.
Add the code to use stylesheet before any styles:
1em is equal to the currentfont-size of the element in question. If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.
Hope it helps. Thank you