getComputedStyle()返回异常字体结果，求排查原因

这是因为页面指定的Montserrat字体没有成功加载，浏览器触发字体回退规则，最终使用系统默认的Times New Roman作为实际渲染字体，具体细节如下：

• CSS声明与实际计算值的差异
  你在DevTools中展开bodyTagStyles时看到的fontFamily = "Montserrat, sans-serif"，是页面CSS里开发者指定的期望字体列表；而getComputedStyle返回的fontFamily、getPropertyValue("font-family")以及font属性值，是浏览器实际渲染时用的计算值——当指定的自定义字体无法加载时，浏览器会按顺序尝试列表里的备选字体，若所有指定字体都不可用，就会 fallback 到系统默认字体。

• Montserrat字体加载失败的常见原因

  • 网络请求问题：字体文件请求返回404、被跨域限制，或网络波动导致加载失败
  • 字体文件本身问题：文件损坏、格式不被当前浏览器支持
  • 加载时机问题：页面用异步方式加载字体，但你执行代码时字体还未加载完成，浏览器会先使用回退字体

• 验证方式
  打开浏览器DevTools的「Network」面板，筛选「Fonts」类型，检查Montserrat字体的请求状态：如果显示红色失败状态码，就能确认是字体加载问题；另外在「Elements」面板的「Computed」标签下查看font-family属性，这里显示的结果会和getComputedStyle返回的完全一致，也就是实际生效的Times New Roman。

内容的提问来源于stack exchange，提问作者Jeff