Geek Answers Handbook

Determine browser font size

Can I determine the font size of the browser? You can also highlight a new font size when the user changes the font size from the menu? Thank you for help. Best wishes.

+6
html css browser font-size
source share
7 answers

Well, it’s possible, but my raven sitting on a crystal ball tells me not to tell you, but to ask you what you want to achieve. Most likely, you want the webpage to look good, regardless of font size. For this I recommend CSS units em , ex etc. .

+8
source share

Can I determine the font size of the browser?

It seems, but rarely is a good idea. Assuming that <body> does not have a fixed font size and there are no intervention rules (e.g. body div):

 var measure= document.createElement('div'); measure.style.height= '10em'; document.body.appendChild(measure); var size= measure.offsetHeight/10; document.body.removeChild(measure);

gives the size in pixels of 1em.

Is it also possible to release a new font size when the user changes the font size from the menu?

Not directly, but you can often try out a meter function like the one above. In IE, you can hang a CSS () expression as they recount when the font size changes (among many other times), but it probably isn't worth it (you still need a poller for other browsers and the expression () is deprecated anyway) .

+7
source share

As far as I know, there is no way to find out. You just assume that the default size is 16 pixels, which is standard.

Best practice is to install all font sizes in ems that scale to fit the base font size.

Most people set the base font to 10 pixels, which makes ems easier.

Example

16px = 1em

 p { font-size:2em; }

It will be 32px

10px = 0.625em

 body { font-size:0.625em; } p { font-size:2em; }

This will be equal to 20px;

I hope this helps.

+3
source share

The short answer is no. However, I suspect that you want to put different sizes on different elements depending on the user's font size. If so, you can take a look at the CSS rules in "em", which is defined as referring to the current font size.

+2
source share
I need the same thing. here i found the best answer.

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

+1
source share

My motivation for tracking text size changes is to dynamically change the height (or width) of elements, so the scroll bar of the browser window is not required on the entire page. Usually, when you do this, you respond to a resize event, but changes in font size can also affect your calculations. I don't care what the actual font size is, I just need to know when it will change.

Here is the jQuery code I'm using. This is similar to the solution proposed by bobince. I have a resize function that will update the height of a div, etc.

 $(window).resize(resize); // update when user resizes the window. $("body").append("<p id='textSizeReference' style='display:none;padding:0'>T</p>"); var refTextHeight = $("#textSizeReference").height(); setInterval(function() { var h = $("#textSizeReference").height(); if (h != refTextHeight) { refTextHeight = h; resize(); // update when user changes text size } }, 500);

If this is an ajax application that is polled for changes to location.hash, you can use the same polling function to resize the text.

0
source share

Here is what I found that works well for detecting the current font family in IE:

document.documentElement.currentStyle ["FontFamily"]

in Firefox / Opera:

There is a method called getComputedStyle that should return the css style for a specific element, but I have not figured out how to return it to the entire document.

Hope this helps a bit!

0
source share

More articles:


All Articles