如何避免由 Web 字体引起的布局偏移( 三 ) _生活百科

但这个方法也不是绝对的好方法，它只适合一些小型字体文件，例如上面提到的使用font-spider提取后的字体文件，并且该字体文件足够?。蛭痔逦募狟ase64字符串往往会增加体积。
一般来讲它有以下缺点：

字体文件是压缩的二进制对象，编码为 Base64 字符串会显着增加大小。CSS 包的 gzip 或 brotli 压缩并不能完全弥补这种膨胀。
字体将被发送到每个浏览器，即使有的浏览器不能使用
字体很少更改，但 CSS 经常更改，这将降低字体的缓存效率，因为每次 CSS 更改都会使整个包无效
膨胀 CSS 大小几乎肯定会延迟页面渲染

使用f-mods减少布局偏移F-mods 是对字体描述符规范的提议更新，其中包括四个新的描述符：

ascent-override (%) : 覆盖分配给上升器的大小
descent-override (%) : 覆盖分配给下降者的行高
line-gap-override (%) : 覆盖行间距
advance-override (#) : 为每个字符设置一个额外的提前量，以帮助匹配行宽并防止单词溢出

前三个都影响线的高度：线框高度 = 上升 + 下降 + 线间隙。基线位置 = 线框顶部 + 线间隙 / 2 + 上升。
这四个描述符的组合允许我们通过告诉浏览器在下载 Web 字体之前字符将占用多少空间来覆盖备用字体的布局以匹配 Web 字体。
f-mods 只真正修改垂直间距和定位。这意味着仍然需要处理字符间距和字母间距，否则可能会在不同的点出现断行的单词，从而导致元素高度发生变化，从而导致布局发生变化。但是@font-face 声明中没有letter-spacingandword-spacing属性，因此我们必须在主体或元素上声明。
@font-face { font-family: custom-font; src: url("./public/fonts/汉仪旗黑.woff2");}@font-face { font-family: fallback-font; src: local(Arial); ascent-override: 100%; descent-override: 20%; line-gap-override: normal; advance-override: 10;}/* 这些具体数值因字体而已，需要按照自己的字体进行计算调整*/body { font-family: custom-font, fallback-font;}.content { letter-spacing: -1.1px; word-spacing: -0.2px;}总结总之，如果浏览器没有及时获取网络字体，并且可以应用font-display: optional到网络字体，让浏览器以备用系统字体呈现来防止布局偏移，否则的话就只能优化我们的字体以尝试在浏览器需要它们之前将它们获取到浏览器：