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

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

苏南大叔:如何使用getComputedStyle检测浏览器的默认字体设置? - 如何使用getComputedStyle检测浏览器的默认字体设置
如何使用getComputedStyle检测浏览器的默认字体设置?(图5-1)

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

标的物

htmlcss定义如下:

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

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

苏南大叔:如何使用getComputedStyle检测浏览器的默认字体设置? - 实际渲染的字体
如何使用getComputedStyle检测浏览器的默认字体设置?(图5-2)

正常情况下不符合

先试图使用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"

相关文档链接:

特殊条件下的契合

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

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

苏南大叔:如何使用getComputedStyle检测浏览器的默认字体设置? - 默认字体是微软雅黑
如何使用getComputedStyle检测浏览器的默认字体设置?(图5-3)

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

苏南大叔:如何使用getComputedStyle检测浏览器的默认字体设置? - 默认字体
如何使用getComputedStyle检测浏览器的默认字体设置?(图5-4)

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

苏南大叔:如何使用getComputedStyle检测浏览器的默认字体设置? - 标准字体改成宋体
如何使用getComputedStyle检测浏览器的默认字体设置?(图5-5)

相关链接

总结

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

助理微信

微信打赏码

微信公众号

微信小程序

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    font