Html 检测浏览器字体大小

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

---

致以最诚挚的问候。

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

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

有点，但这不是一个好主意。假设没有设置字体大小，并且没有干扰规则（如“body div”）：

提供1em的像素大小

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

---

不直接，但您可以每隔一段时间轮询一个类似上述的度量函数。在IE上，您可以挂起CSS表达式（）的复选框，因为这些表达式在字体大小更改时（在许多其他时间内）会重新计算，但这可能不值得（您仍然需要其他浏览器的轮询器，而且表达式（）已被弃用）。

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

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

大多数人将基本字体设置为10像素，这使得使用ems更容易

示例

16px=1em

p {
    font-size:2em;
}

这相当于32px

---

10px=0.625em

body {
    font-size:0.625em;
}

p {
    font-size:2em;
}

这相当于20像素

---

我希望这会有所帮助。

我监视文本大小变化的动机是动态更改元素的高度（或宽度），这样整个页面就不需要浏览器窗口滚动条。通常，在执行此操作时，您会响应调整大小事件，但字体大小的更改也会影响您的计算。我不太在乎实际的字体大小，我只需要知道它什么时候改变

下面是我使用的一些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);

$（窗口）。调整大小（大小）；//当用户调整窗口大小时更新。
$（“body”）.append（
T
）；
var refTextHeight=$（“#textSizeReference”）.height（）；
setInterval（函数（）{
var h=$（“#textSizeReference”）.height（）；
如果（h！=参考文本高度）{
refTextHeight=h；
resize（）；//当用户更改文本大小时更新
}
}, 500);

---

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

我发现有一个功能可以很好地检测IE中文档的当前字体系列：

document.documentElement.currentStyle[“fontFamily”]

在Firefox/Opera中：

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

希望这能有所帮助

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

---

你好，斯科潘，我得到了你的肯定回答。你能解释一下你的想法吗？你有一个例子吗？再次感谢。向你问好。我不在，所以没能及时回答。像素开发者给出了一个完美的例子！我只是想指出，只有当页面上的根元素（

元素）的

字体大小为100%时，这才有效。如果您知道根元素的字体大小，您可以通过在@bobince的测试结束时放置
size=size*whateverMyCssDefinesAsBaseSize/100
来计算用户的字体大小。让它返回整个文档的方法是执行
getComputedStyle（document.documentElement）
。执行
getComputedStyle（document）
将永远不会起作用，因为style属性是HtmleElement接口的一部分。而且，文档不会从HtmleElement接口继承属性：它只是一个节点，而不是空间元素。因此，文档节点本身没有样式，因此不能对其进行
getComputedStyle
。我认为您的意思是“rem”而不是“em”“rem”是相对于元素的字体大小，而“em”是相对于目标的父元素。
$(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);