检测浏览器字体大小答案

【问题标题】：detect browser font size检测浏览器字体大小
【发布时间】：2010-10-18 21:41:42
【问题描述】：

是否可以检测浏览器字体大小？当用户从菜单选择中更改字体大小时，是否可以检测新的字体大小？非常感谢大家的帮助。最好的问候。

【问题讨论】：

jQuery Plugin that can help

标签： html css browser font-size

【解决方案1】：

简短的回答是否定的。但是，我怀疑您希望根据用户的字体大小在不同的元素上放置不同的大小。如果是这样，您可能想看看在“em”中指定 CSS 规则，它被定义为相对于当前字体大小。

【讨论】：

您好 Skorpan，我得到了您的肯定答复。你能解释一下你的想法吗？你有一个例子吗？再次感谢。最好的问候。
我不在，无法及时回复。不过，Pixel 开发者给出了一个完美的例子！

【解决方案2】：

是否可以检测浏览器字体大小？

有点，但它很少是一个好主意。假设

没有设置字体大小并且没有干扰规则（如'body div'）：

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

为您提供 1em 像素的大小。

当用户从菜单选择更改字体大小时，是否可以检测新的字体大小？

不是直接的，但是你可以像上面那样经常轮询一个测量函数。在 IE 上，您可以挂起检查 CSS 表达式（），因为这些会在字体大小更改时重新计算（以及许多其他时间），但这可能不值得（您仍然需要其他浏览器和表达式的轮询器（ ) 无论如何都已弃用)。

【讨论】：

我只是想指出，这仅在页面上的根元素（<html> 元素）具有 100% 的 font-size 时才有效。如果您知道根元素的字体大小，则可以通过将size = size * whateverMyCssDefinesAsBaseSize / 100 放在@bobince 的测试末尾来计算用户的字体大小。

【解决方案3】：

据我所知，没有办法找出答案。您只需假设默认大小为 16 像素，这是标准。

最佳做法是在 ems 中设置所有字体大小，并根据基本字体大小进行缩放。

大多数人将基本字体设置为 10 像素，这样可以更轻松地使用 em。

示例

16px = 1em

p {
    font-size:2em;
}

这将等于 32 像素

10px = 0.625em

body {
    font-size:0.625em;
}

p {
    font-size:2em;
}

这将等于 20 像素；

希望对你有所帮助。

【讨论】：

我认为你的意思是'rem'而不是'em'。 'rem' 相对于元素的字体大小，而 'em' 相对于目标的父元素。 sitepoint.com/understanding-and-using-rem-units-in-css

【解决方案4】：

我监控文本大小变化的动机是动态改变元素的高度（或宽度），这样整个页面就不需要浏览器窗口滚动条。通常，当您这样做时，您会响应 resize 事件，但字体大小更改也会影响您的计算。我不太关心实际的字体大小是多少，我只需要知道它什么时候发生变化。

这是我使用的一些 jQuery 代码。这类似于 bobince 建议的解决方案。我有一个调整大小的函数，可以更新 div 等的高度。

$(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);

如果这是一个轮询 location.hash 更改的 ajax 应用程序，您可以使用相同的轮询函数来更改文本大小。

【讨论】：

【解决方案5】：

这是我发现在 IE 中检测文档的当前字体系列效果很好的东西：

document.documentElement.currentStyle["fontFamily"]

在 Firefox/Opera 中：

有一个名为 getComputedStyle 的方法应该返回给定特定元素的 css 样式，但我还没有找到一种方法让它返回整个文档。

希望这会有所帮助！

【讨论】：

在整个文档中返回它的方法是执行getComputedStyle(document.documentElement)。执行getComputedStyle(document) 永远不会起作用，因为 style 属性是 HTMLElement 接口的一部分。而且，文档不从 HTMLElement 接口继承属性：它只是一个节点，而不是空间元素。因此，文档节点本身没有样式，因此您不能在其上getComputedStyle。

【解决方案6】：

我需要同样的东西。在这里我找到了最佳答案。

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

【讨论】：