网页显示的字体异常排查方法

页面的字体是由css样式表中font-family属性指定的，font-family属性可以是多个值。
举例：font-family: Microsoft YaHei, Arial, sans-serif;
它相当于一个字体族的优先级表，页面加载时会从第一个到最后都加载一遍，遇到系统上有匹配字体族时会直接显示出来。通常最后一个是通用字体族名。浏览器自定义字体中的标准字体、serif(有衬线字体)、sans-serif(无衬线字体)、宽度固定的字体都是设定通用字体族的一个默认值。如果网页不调用，设置不会生效。通用字体族作用是防止所有指定字体族电脑上都没有安装，页面显示出现问题。
现在有很多强制修改字体扩展软件Stylus、CustomCSS、MacType、noMeiryoUI等等。
浏览器设置默认字体位置，地址栏输入chrome://settings/fonts
使用开发者工具排查网页字体很方便
1通过软件修改的优先将规则停用后刷新网页。
2极速模式下，
方法一
安装what font扩展鼠标靠近就能查看到网页使用了什么字体
what-font-find-font.zip (156.02 KB)

2020-7-14 11:22 上传

点击文件名下载附件
下载积分: 经验 -1

安装方法，解压文件夹，将crx直接拖入浏览器，点击安装
使用方法，点击扩展图标会在右上角显示exit what font 如果没有刷新下网页再点击 鼠标移动到文字上就能看到网站使用的字体，点击能看到font-family属性、文字颜色、字体大小等详细信息


方法二
右键有问题的地方，在右键菜单中选择审查元素/检查，在元素面板style选项卡的过滤器中，输入font-family从第一个到最后一个排查是哪一个字体生效了，打开运行输入C:\windows\Fonts 找到那个字体。



3兼容模式下，按f12打开开发者工具 ctrl+b选取页面上出问题的部分，点击后选择元素面板的已计算选项卡，在过滤器中输入font-family从第一个到最后一个排查是哪一个字体生效了，打开运行输入C:\windows\Fonts 找到那个字体。