Question

我有一份我从谷歌的CDN中提取的字体列表。他们列出了文档here，但我在设置半粗体斜体样式时遇到了问题。有没有办法使这项工作？

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600' rel='stylesheet' type='text/css'>

@semibold: "Open Sans:600", sans-serif;
@semibold-italic: "Open Sans:600italic", sans-serif;
@light: "Open Sans:300", sans-serif;

我知道我可以在font-weight中设置font-face和样式。

如何在变量声明中包含所有内容？

Answer 1

我对Google字体的工作方式不太熟悉，但也许mixin对你来说是一个不错的选择。

.semibold {
    font-family: 'Font', 'Font B', 'Font C';
    font-weight: 500;
    font-style: normal;
}

div {
    .semibold;
}

Answer 2

您可以使用parametric mixins。你可以声明一个样式，比如.font，它接受几个参数 - 在这种情况下，它应该接受font-family，font-weight和font-style。当然，您可以自由添加/删除其他font-或text-相关属性，以便进一步微调。

// Declare mixin
.font(@fontFamily: Arial, sans-serif; @fontWeight: normal; @fontStyle: normal) {
    font-family: @fontFamily;
    font-style: @fontStyle;
    font-weight: @fontWeight;
}

// Sample styles
.semibold {
    .font("Open Sans", sans-serif; 600; normal);
}
.semibold-italic {
    .font("Open Sans", sans-serif; 600; italic);
}
.light {
    .font("Open Sans", sans-serif; 300; normal);
}

使用多个字体字段设置LESS字体变量

2 个答案: