html - 检测浏览器字体大小

Question

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

score 9 · Accepted Answer

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

有点，但它很少是一个好主意。假设 <body> 没有设置字体大小并且没有干扰规则（如“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 表达式（），因为这些会在字体大小更改时重新计算（以及许多其他时间），但这可能不值得（您仍然需要其他浏览器和表达式的轮询器（ ) 无论如何都已弃用)。

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

例子

16px = 1em

p {
    font-size:2em;
}

那将等于 32px

10px = 0.625em

body {
    font-size:0.625em;
}

p {
    font-size:2em;
}

那将等于 20px；

我希望这有帮助。

score 2 · Accepted Answer

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

score 0 · Accepted Answer

我监控文本大小变化的动机是动态改变元素的高度（或宽度），这样整个页面就不需要浏览器窗口滚动条。通常，当您这样做时，您会响应 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 应用程序，您可以使用相同的轮询函数来更改文本大小。

score 0 · Accepted Answer

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

document.documentElement.currentStyle["fontFamily"]

在 Firefox/Opera 中：

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

希望这会有所帮助！

html - 检测浏览器字体大小

6 回答 6

Related

Reference