使用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;
}