Rendered Font
截图:
简介:
■ 使用方法
选择你要判断字体的字符串,右击点击“Rendered Font”。
*将判断所选字符串的第一个字符。
■ 浏览器字体应用逻辑
优先按照 font-family 中指定的顺序应用字体。另外,如果字体中没有存储相应的字符串,则应用具有以下优先级的字体,如果没有可应用的字体,则应用浏览器中设置的默认字体。
换句话说,即使在同一个句子中,每个字符也可能应用不同的字体,因此必须对任何一个字符进行字体确定。
■ 字体确定过程(概述)
<指定要判断的字符串>
1.在浏览器上选中要判断的字符串,右键点击“渲染字体”。将判断所选字符串的第一个字符。
<获取字体系列>
2.获取存储字符串的 DOM 元素,并使用 window.getComputedStyle 获取为该元素指定的字体系列。
< 找出要判断的字符串应用了font-family中的哪种字体>
3.创建一个测试 DOM 元素并存储大约 10 个字符(任意)以供判断。
4.首先,检查2中获取的font-family按原样应用时元素的宽度和高度5。接下来查看font-family中设置的每个字体名称独立应用时的宽高,与4的值进行比较,判断符合该值的字体为实际应用的字体。