html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果

在做 GithubProfile 项目的时候，使用了数字动画展示的效果，如My GithubProfile页面中的commits,stars以及followers数字。实际使用中，由于数字字体不等宽，造成在数字增长动画时很明显的震颤，体验非常不好。

这里我最终使用了CSS的 font-feature-settings 的属性来解决了这一问题，先来看解决前后的效果对比图。

font-feature-settings

font-feature-settings 是CSS的高级特性，用来提供对OpenType字体图形展示调节， MDN·font-feature-settings。

首先CSS3提供了一组与OpenType字体特性显示映射的属性和值，这里我们首先利用了 font-variant-numeric ，并将其值设为 tabular-nums ，这表示要求字体的数字图像保持尺寸一致，并像在表格中一样对齐，这等同于OpenType字体中的 tnum 。

当没有对应的属性映射时，我们则可以使用 font-feature-settings 属性，这里我们直接将其设为要求的OpenType属性 tnum 。

font-feature-settings 和 font-variant-numeric 属性可以同时应用，它们其中任何之一都可以达到相同的效果，但是为了更多的兼容支持，对它们同时做了定义。

兼容性

font-feature-settings兼容性：

font-variant-numeric兼容性：

在CanIUse数据库中未找到结果，贴上MDN的兼容性说明

可以看出 font-feature-settings 的主流浏览器兼容支持比较好，所以使用时优先利用该特性。

Demo对比

这里给出 montserrat 字体在开启该特性前后的效果

总结

以上所述是小编给大家介绍的使用CSS3 font-feature-settings特性减除字体动画震颤效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果相关推荐

【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
js字体溢出字体变小_如何在网络上使用可变字体
js字体溢出字体变小可变字体是由从事字体设计的四家最大的技术公司--Apple,Google,Microsoft和Adobe共同开发的. 顾名思义,可变字体允许设计人员从同一个字体文件中获取无限数量 ...
JupyterLab改变字体方法（内容、markdown、代码、输出、UI字体，JupyterLab版本3.0.12）
Jupyter Lab默认字体较小,观察起来不太方便.由于Jupyter Lab版本变化比较频繁,改变字体的方法也不太稳定.适用版本:JupyterLab 3.0.12. 方法一:通过菜单Settin ...
html给字体增加小手,CSS3中新增的对文本和字体的设置
文字阴影 text-shadow: 水平偏移垂直偏移模糊颜色兼容性:IE10+ Document p{ color:blue; text-shadow: 3px 3px 3px black; ...
R语言ggplot2可视化：ggplot2中使用element_text函数设置轴标签文本粗体字体（bold text,只设置x轴的标签文本使用粗体字体）
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体) 目录
python使用matplotlib可视化、自定义设置Y轴刻度标签字体的大小( setting axis ticks size in matplotlib y axis)
python使用matplotlib可视化.自定义设置Y轴刻度标签字体的大小( setting axis ticks size in matplotlib y axis) 目录
R语言ggplot2可视化：ggplot2中使用element_text函数设置轴标签文本粗体字体（bold text,只设置y轴的标签文本使用粗体字体）
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置y轴的标签文本使用粗体字体) 目录
消除python变量的值_SPSS变量值标签的批量设置、复制、显示及删除问题
在SPSS的变量设置中,值标签是对变量可能取值的注释说明.当我们需要给很多个变量设置相同的值标签时,该如何操作?例如,在很多调查问卷中,采用里克特量表设计,因此这些题目都采用相同的选项评分方法,例如1 ...
html设置table表格的弧度,用CSS3和table标签实现一个圆形轨迹的动画的示例代码
html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把div容器的外边 ...

html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果

html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果相关推荐

最新文章

热门文章