首页 文章

Less：为font-family变量添加font-weight的最简单方法

提问于
浏览 次
0

我正在研究一个使用LESS进行样式化的系统 . 字体系列的变量如下所示：

@font-family-regular: "robotoregular", sans-serif;
@font-family-bold: "robotobold", sans-serif;
@font-family-condensedregular: "roboto_condensedregular", sans-serif;
@font-family-condensedbold: "roboto_condensedbold", sans-serif;

现在我必须将字体系列更改为Arial . 我将使用Arial Narrow作为压缩字体：

@font-family-regular: Arial, sans-serif;
@font-family-bold: Arial, sans-serif;
@font-family-condensedregular: "Arial Narrow", sans-serif;
@font-family-condensedbold: "Arial Narrow", sans-serif;

问题是，我无法通过这种方式设置两种粗体字体样式的字体粗细 . 我可以添加“font-weight：bold;”手动使用其中一个粗体系列的所有样式，但我想避免这种情况 .

有没有办法告诉LESS类似“为所有元素：如果font-family设置为@ font-family-bold或@ font-family-condensedbold add font-weight：bold;”或类似的东西？什么是最优雅的解决方案？

先感谢您 .

html css fonts less

1 回答

  • 0

    我担心你不得不稍微改变一下标记，但这是我能提供的解决方案，可能对你有用：

    @font-family-regular: "robotoregular", sans-serif;
@font-family-bold: "robotobold", sans-serif;
@font-family-condensedregular: "roboto_condensedregular", sans-serif;
@font-family-condensedbold: "roboto_condensedbold", sans-serif;

.font-face-bold (@font-select) when 
    (@font-select = @font-family-bold),
    (@font-select = @font-family-condensedbold) {
  font-weight: bold;
}

.font-face (@size, @font-select) {
    font: @size @font-select;
    .font-face-bold(@font-select);
}


// USAGE
.my-class {
    .font-face(14px, @font-family-regular);
}

.my-bold-class {
    .font-face(14px, @font-family-bold);
}

.my-condensed-class {
  .font-face(14px, @font-family-condensedregular);
}

.my-condensed-bold-class {
  .font-face(14px, @font-family-condensedbold);
}

    我在这里做的是我创建了两个彼此嵌套的mixin . 如果传递的变量是 @font-family-bold 或 @font-family-condensedbold ，则内部条件是有条件的，只有"does" .

    这是上面代码的Live Example .

    希望这适合你 .

    回复于

相关问题