logo标签列表

检测浏览器字体大小

htmlcssbrowserfont-size
10

能否检测浏览器字体大小？并且当用户从菜单中更改字体大小时，能否检测到新的字体大小？ 非常感谢大家的帮助。 最好的祝福。

jQuery插件可以帮助实现将em转换为px并获取默认字体大小。 - SpYk3HH
7个回答
9

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

有点可能，但这通常不是一个好主意。假设 <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表达式()上，因为这些表达式会在字体大小更改时重新计算（在许多其他时间也会重新计算），但这可能不值得（您仍需要轮询其他浏览器，并且expression()已被弃用）。

1
我想指出的是，这仅在页面上的根元素（<html>元素）具有100％的font-size时才起作用。如果您知道根元素的字体大小，则可以通过在@bobince的测试末尾放置size = size * whateverMyCssDefinesAsBaseSize / 100来计算用户的字体大小。 - Paul d'Aoust
3
据我所知，没有一种方法可以找出默认字体大小。您只需假设默认大小为16像素，这是标准大小。
最佳实践是将所有字体大小设置为ems，这些大小会根据基本字体大小进行缩放。
大多数人将基本字体设置为10像素，这样更容易使用ems。 示例 16像素=1em
p {
    font-size:2em;
}

这相当于32像素

10像素 = 0.625倍的em

body {
    font-size:0.625em;
}

p {
    font-size:2em;
}

那将等于20像素； 希望这有所帮助。
我认为你指的是'rem'而不是'em'。 'rem'是相对于<HTML>元素的字体大小，而'em'则相对于目标的父元素。https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ - SunshinyDoyle
3
2
短答案是否定的。但是，我猜想您希望根据用户的字体大小在不同元素上放置不同的尺寸。如果是这样，您可能需要查看使用“em”指定CSS规则，它被定义为相对于当前字体大小。请注意保留HTML标签。
嗨Skorpan， 我从你那里得到了一个积极的答复。你能解释一下你的想法吗？你有例子吗？再次感谢。最好的问候。 - Yusuf Akyol
我不在，所以没能及时回答。不过Pixel开发者已经给出了一个完美的例子！ - Deniz Dogan
0
我的监控文本大小变化的动机是为了动态更改元素的高度（或宽度），以便整个页面不需要浏览器窗口滚动条。通常，当您这样做时，会响应调整大小事件，但字体大小的更改也可能影响您的计算。我不太关心实际的字体大小，只需要知道什么时候更改即可。
以下是我使用的一些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 应用程序，您可以使用相同的轮询函数来更改文本大小。
0

这里有一个我发现在IE中检测文档当前字体族很有效的方法：

document.documentElement.currentStyle["fontFamily"]

在Firefox/Opera中：

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

你可以通过执行 getComputedStyle(document.documentElement) 来获取整个文档的样式。执行 getComputedStyle(document) 是行不通的，因为样式属性是 HTMLElement 接口的一部分。而且，文档并没有从 HTMLElement 接口继承属性：它只是一个节点，而不是空间元素。因此，文档节点本身没有样式，所以你不能在其上执行 getComputedStyle。 - Jack G
0
我创建了一个名为 browser-font-size-observer 的包，可以实现这一功能！
你可以在这里找到它：https://github.com/arturbien/browser-font-size-observer
  1. 安装该包：
# yarn
yarn add browser-font-size-observer

# npm
npm install browser-font-size-observer
  1. 创建观察器以获取或跟踪浏览器的字体大小设置：
import BrowserFontSizeObserver from "browser-font-size-observer";

const observer = new BrowserFontSizeObserver((state) => {
 console.log(state); // { browserFontSize: 24, ratio: 1.5 }
});

console.log(observer.state); // { browserFontSize: 24, ratio: 1.5 }

// To stop observing
observer.disconnect();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接