使用less编译出css引用自定义字体

最新推荐文章于 2023-05-06 17:15:02 发布

sgfawegawegaweg

最新推荐文章于 2023-05-06 17:15:02 发布

阅读量6.9k

点赞数

分类专栏： UI 文章标签： less css 字体

本文链接：https://blog.csdn.net/u012545005/article/details/41593703

版权

本文展示了如何利用Less预处理器编写代码，自动生成不同样式和权重的Roboto字体CSS规则。通过定义变量和混合（mixins）实现代码复用，减少重复编写。编译后的CSS包括了各种字体风格和权重，方便应用于网页设计中。

摘要由CSDN通过智能技术生成

编写less文件如下

@roboto-font-path: 'fonts';

.roboto-font(@type, @weight, @style) {
    @font-face {
        font-family: 'Roboto';
        src: url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype');
        font-weight: @weight;
        font-style: @style;
    }
}

.roboto-font-one(@type, @weight, @style) {
    .roboto-font('@{type}', @weight, @style);
}

.roboto-font-pair(@type, @weight) {
    .roboto-font('@{type}', @weight, normal);
    .roboto-font('@{type}Italic', @weight, italic);
}

.roboto-font-one('Italic', 200, italic);
.roboto-font-one('Regular', 400, normal);
.roboto-font-pair('Thin', 100);
.roboto-font-pair('Light', 300);
.roboto-font-pair('Medium', 500);
.roboto-font-pair('Bold', 700);
.roboto-font-pair('Black', 900);</