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

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

sgfawegawegaweg

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

阅读量7k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/u012545005/article/details/41593703

UI 专栏收录该内容

2 篇文章

订阅专栏

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

编写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);

编译出来的css如下

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

参考：
在线less编译网址：http://tool.oschina.net/less
字体文件：http://pan.baidu.com/s/1kTA7Kub