如何使用getComputedStyle检测浏览器的默认字体设置？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在苏南大叔的文章中，已经说过很多次字体渲染的问题了。网页利用css的font-family来定义字体的一个可用范围，而实际上，每个客户端安装的字体是可以有一定区别的。所以，最终使用了哪个字体，其实是个未知数。在f12里面，这个结果被称之为“Rendered Fonts”，注意和平时的“ComputedStyle”是有区别的。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文探讨一下，使用getComputedStyle()来检测网页实际渲染的字体的可能性。当然，对于检测实际渲染的字体这件事来说，
本文测试环境：win10,chrome@104.0.5112.102。

标的物

html及css定义如下：

<style>
    html,body,p {
        font-family: PingFang SC, Microsoft YaHei, sans-serif;
    }
</style>
<p>p首行首字母，更多文字放这里</p>

可以通过开发者工具知道，实际加载的字体是微软雅黑。所以，本文的目标答案也就是“微软雅黑”。当然，代码里面检测出的是对应的英文Microsoft YaHei。

正常情况下不符合

先试图使用getComputedStyle()来解决问题，发现无法解决“font-family”的实际渲染结果。

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}
var p = document.querySelector('p');
var _family = getComputedStyle(p, null).fontFamily;
var _family2= css(p, "font-family");
console.log(_family);
console.log(_family2);

输出结果是：

"PingFang SC", sans-serif, "microsoft yahei"
"PingFang SC", sans-serif, "microsoft yahei"

相关文档链接：

• https://newsn.net/say/js-get-computed-style.html

特殊条件下的契合

特殊条件下，getComputedStyle()也是可以达成检测字体的目的，这种情况就是去检测默认字体。正常情况下来说，网页定义的字体都是一系列字体，getComputedStyle()检测到的也是一系列字体，而不是期待中的某个具体字体。检测代码如下：

var p = document.querySelector('p');
var default_font = getComputedStyle(p, null).fontFamily;

但是，某种特殊环境下，也是可以达到某种契合的。这个特殊条件就是：网页的css里面根本没定义字体font-family，浏览器就会自动把默认的字体作为font-family叠加上去，继而就可以通过本文的getComputedStyle()函数得到浏览器的默认字体设置。

可以把浏览器默认字体改成宋体，代码一样可以检测到是simsun。

相关链接

• https://newsn.net/say/css-font-family-pingfang.html
• https://newsn.net/say/font-family-name.html
• https://newsn.net/say/chrome-plugin-font-finder.html

总结

正常情况下来说，通过getComputedStyle()是无法确定渲染的最终字体是什么的。特殊情况下，如果css并没有指定font-family，那么，浏览器就是使用默认字体来进行渲染的，而getComputedStyle()检测出来的font-family也正是默认字体。两者就有了巧合，得到了目标答案。

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。