css某一行的部分字体变大, 又不增加行间距

Posted by he; tagged with css , 字体

当你希望把某一行的部分字体变大, 又不希望增加行间距的时候

font: icon

就派上用场了,它的大小受整体的 font-size 影响, 但是观感上面会比其他的字体大几个 px, 效果如下,其实小字部分的 font-size都是 0.75rem(12px),只不过 UserName 那边设置了 font:icon
919c5075a025162957fca2c3691d102945aa8718_2_1035x252.png

使用 font:icon 这种方式不会影响行间距(line-height)。这是因为字体图标和文本字符一样,都是基于字体的矢量图形,它们的大小和间距主要由字体文件的设计和CSS的设置(如 font-size 和 line-height)决定。

使用 font:icon 的优点包括:

矢量图形:图标在缩放时不会失真,可以适应不同的屏幕分辨率。
样式统一:字体图标和文本样式统一,易于应用CSS样式。
减少HTTP请求:与单独使用图片图标相比,字体图标可以减少HTTP请求次数,从而优化加载速度。

- 本文完 -