ascent-override descent-override line-gap-override一锅端

这篇文章发布于 2022年03月21日,星期一,23:35,归类于 CSS相关。 阅读 9210 次, 今日 5 次 2 条评论

 

破茧成蝶

ascent-overridedescent-overrideline-gap-override这 3 个 CSS 属性作用都是类似的,都是在 @font-face 自定义字体中设置文字的上、中或下间隙大小。

由于兼容性一致,作用类似,使用场景也一致,因此,放在一起介绍。

一、作用说明

简单来说:

ascent-overridedescent-override用来重置字体中内置的上悬线和下悬线的位置。

字体基础知识

vertical-align属性支持 top/baseline/bottom 这 3 个值,这个很多人知道,实际上,ascentdescent 也是文字垂直对齐中非常重要的两条线。

参见下面的示意图:

字体中的各种线

表示英文字母(包括大写)图形的上下边缘线位置。

如果大家对 SVG 字体了解,就可以看到其字体面的描述中有 ascentdescent 这两项,如下截图示意:

ascent和descent示意

<font-face 
  font-family="ZxxHeiTi"  
  font-weight="400"   
  font-stretch="normal"    
  units-per-em="1000"
  ascent="1240" 
  descent="-334" 
/>

ascent-overridedescent-override属性就是用来重置字体内部的 ascentdescent 的。

line-gap-override作用

如果大家认真读过 《CSS世界》,就应该知道 line-height:normal 这个 CSS 声明很有故事,当行高为 normal 的时候,最终的行高大小是由字体决定的。

例如下面我手机拍的照片,其中微软雅黑字体和宋体下的行高计算值就是不一样的。

normal不同字体下的行高计算值

line-gap-override 属性的作用是重置这个字体内部设定的行间隙(可以近似理解为行高)。

二、功能演示

上面介绍了几个属性的作用,下面看下真实的表现效果,这几个 CSS 属性都需要在 @font-face 声明中才有效,例如:

@font-face {
    font-family: ascentFont;
    src: local('PingFang SC'),
         local('Microsoft Yahei');
    ascent-override: 100%;
    descent-override: 0%;
    line-gap-override: 80%;
}

为了方便大家直观体验效果,我专门做个个演示页面,您可以狠狠地点击这里:CSS ascent-override descent-override line-gap-override基本效果demo

各个属性表现如下 GIF 截屏示意:

1. ascent-override

ascent 是设置上悬线的位置,默认是 100%,范围从 0%-∞,值越大,文字越下沉,这个很好理解,上悬线的位置大了之后,文字的文字自然就靠下了。

上悬线位置重置示意图

2. descent-override

descent 是设置下悬线位置,由于不支持负值,且一般字体内部的 descent 都是负值,因此,初始值可以看成是 0%,值越大,文字的位置越高。例如下面 GIF,所以滑杆移动到右侧,文字所在的垂直位置明显变高。

下悬线效果示意

3. line-gap-override

line-gap-override 设置要想生效,则对应字体所在的 lien-height 属性值必须是 normal,无论是数值,长度值还是百分比值都会让 line-gap-override 属性没有效果。

line-gap-override 不支持负值,因此,只能让行高变高,而不能减少。

行间隙重置

三、应用场景

在某些 Android 设备下,或者使用某些自定义字体或图标的时候,文字或者图形总是没法垂直居中,无论是 Flex 布局的 align-items:center ,还是 line-height 设置都不行,则多半是这个字体内部的上悬线或者下悬线位置不太对。

此时可以使用本文提供的这几个属性进行重定义进行修复。

我想,这就是这几个 CSS 属性设计的意义所在。

不过,有点遗憾的是,目前 Safari 浏览器还没有对其进行支持。

兼容性示意

在 JS 中使用

另外,ascent-overridedescent-override等属性也是可以在 JavaScript 代码中使用的,使用全局的 FontFace 对象接口,下面是一段代码示意,适合不太喜欢 CSS 的开发小伙伴:

let fontFace = new FontFace('Roboto', 'url(./roboto.woff2)', {
  'descentOverride': '90%'
});
console.log(fontFace.descentOverride); // 90%
fontFace.descentOverride = 'normal';
console.log(fontFace.descentOverride); // 'normal'

四、结尾的絮叨

最近小区被封了,一切从严,很久没出门了,其实我觉得吧……

写了很多,又删了,算了……好好写代码。

今天看新闻,发生了空难,整个人心情都不好了,刚开始刷到的时候还没确认,希望是小故障,没想到……

……又删了,算了……好好写代码。

做好自己,发光发热。

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. DQ说道:

    100.0.4896.60 的 chrome 不生效

  2. psilo说道:

    demo 在 99.0.4844.74 的 chrome 不生效
    在 97 的 firefox 生效