Question

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

Answer 1

嗯，这是有可能的，但我坐在水晶球上的乌鸦告诉我不要告诉你怎么做，而是问你想要达到什么目的。最有可能的是，无论字体大小如何，您都希望网页看起来不错。为此，我建议使用CSS units em, ex etc。

Answer 2

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

有点，但它很少是一个好主意。假设＆lt; body＆gt;没有设置字体大小，也没有干扰规则（比如'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表达式（），因为这些在字体大小改变时重新计算（在许多其他时间），但它可能不值得（你仍然需要其他浏览器和表达式的轮询器（）无论如何都被弃用了。）

Answer 3

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

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

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

示例

16px = 1em

p { font-size:2em; }

等于32px

10px = 0.625em

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

那等于20px;

我希望有所帮助。

Answer 4

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

Answer 5

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

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

Answer 6

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

这是我使用的一些jQuery代码。这类似于bobince建议的解决方案。我有一个resize函数，它将更新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);

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

Answer 7

我发现以下内容非常适合在IE中检测文档的当前字体系列：

document.documentElement.currentStyle [ “fontFamily中”]

在Firefox / Opera中：

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

希望这有点帮助！

检测浏览器字体大小

7 个答案: