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

Posted 2024-09-06 by he; tagged with css , 字体

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

font: icon

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

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

使用 font:icon 的优点包括：

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