Less中的字体面板Mixin

Question

使用 Less，我将字体系列定义如下：

@georgia: georgia, times, 'times new roman', 'nimbus roman no9 l', serif; 

然后我有了 less mixin：

.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) {
  font: @style @variant @weight @size~"/"@lineheight @family;
} // font

最后我像这样使用它：

p {
  .font(@georgia, 1.0em, 1.5)
}

但我也想用自定义字体来定义字体系列：

@something: 'custom-font', arial, ...;

但是首先我需要注册自定义字体：

@font-face {
  font-family: 'custom-font';
src:url('fonts/custom-font.eot');
src:url('fonts/custom-font.eot?#iefix') format('embedded-opentype'),
    url('fonts/custom-font.woff') format('woff'),
    url('fonts/custom-font.ttf') format('truetype'),
    url('fonts/custom-font.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}

是否可以创建一个 LESS mixin 用于 @font-face，这样我就可以传递字体名称和路径并注册字体而不必重复所有这些代码了？

我不确定如何将其与我的字体 mixin 集成...

或者是否有更好的方法来实现这一点...

谢谢， 米格尔

- Miguel Moura

Answer 1

你可以定义自己的 mixin 以包含自定义字体，但由于 LESS 不实现任何控制指令，只有 mixin 的保护符号（在当前问题的方面上是无用的），因此您不能缩短 mixin 的代码以定义 font-face。

.include-custom-font(@family: arial, @weight: normal, @style: normal){
    @font-face{
        font-family: @family;
        src:url('fonts/@{family}.eot');
        src:url('fonts/@{family}.eot?#iefix') format('embedded-opentype'),
            url('fonts/@{family}.woff') format('woff'),
            url('fonts/@{family}.ttf') format('truetype'),
            url('fonts/@{family}.svg#icon') format('svg');
        font-weight: @weight;
        font-style: @style;
    }
}

- Lajos Mészáros

Answer 2

我知道这是一篇旧文章，但是我通过以下方式解决了这个问题，希望能帮到其他人。

首先，我创建了一个参数化mixin，其中包含每个需要在 @font-face 中重复的部分：

.loadFont(@Weight; @Name; @Local; @Eot:'@{Local}.eot'; @Woff:'@{Local}.woff'){
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: @Weight;
    src: url(@Eot);
    src: local(@Name), local(@Local), url(@Eot) format('embedded-opentype'), url(@Woff) format('woff');
}

然后加载了所有的网页字体（在这种情况下是Open Sans）。

@font-face {.loadFont(100;'Roboto Thin';'Roboto-Thin')}
@font-face {.loadFont(300;'Roboto Light';'Roboto-Light')}
@font-face {.loadFont(400;'Roboto Regular';'Roboto-Regular')}
@font-face {.loadFont(500;'Roboto Medium';'Roboto-Medium')}
@font-face {.loadFont(700;'Roboto Bold';'Roboto-Bold')}
@font-face {.loadFont(900;'Roboto Black';'Roboto-Black')}

然后创建第二个参数化mixin，其中包含要应用于元素的CSS规则

.font(@weight:400; @size:14px; @font-family:'Open Sans', sans-serif){
    font:@arguments;
}

最后，我像这样在我的元素上使用它。

div.someClass{
    .font(); //to accept all default parameters 
}
div.otherClass{
    .font(100; 40px); //to specify weight and size
}

作为注意事项，我将所有的*.eot和*.woff文件放在与LESS文件相邻的位置，并以@Local参数命名（Open-Sans.woff || Open-Sans.eot）。

- Zero Dragon

---

我刚刚又仔细地阅读了被接受的答案，现在感觉自己很蠢 xD - Zero Dragon

Answer 3

我喜欢按文件夹来组织我的字体，像这样：

/fonts/OpenSans-Bold/OpenSans-Bold.eot
/fonts/OpenSans-Bold/OpenSans-Bold.svg
/fonts/OpenSans-Bold/OpenSans-Bold.ttf
/fonts/OpenSans-Bold/OpenSans-Bold.woff

我使用这个 LESS MIXIN 来设置字体：

.font-face(@fontName: sans-serif; @fontWeight: normal; @fontStyle: normal) {
    @font-face {
        font-family: @fontName;
        src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot');
        src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot?#iefix') format('embedded-opentype'),
             url('@{pTheme}/fonts/@{fontName}/@{fontName}.woff') format('woff'),
             url('@{pTheme}/fonts/@{fontName}/@{fontName}.ttf') format('truetype'),
             url('@{pTheme}/fonts/@{fontName}/@{fontName}.svg#@{fontName}') format('svg');
        font-weight: @fontWeight;
        font-style: @fontStyle;
    }
}

场景：

@pTheme: "../../themes/[THEME NAME]";

混合调用示例：

.font-face('OpenSans-Bold');

我已经定义了@pTheme变量，这样我就可以在背景图片中使用它，如下所示：

background: url("@{pTheme}/images/logo.png") no-repeat;

- PAdrian

Answer 4

LESS确实支持带有参数的mixin。请参见此处：http://lesscss.org/#-parametric-mixins

- Ulrich Schmidt-Goertz

Answer 5

你可以尝试使用这个 mixin 来设置字体（例如 Proxima Nova 字体）：

.fontFace(@fontWidth) {
    @fontName: "Proxima Nova @{fontWidth}";
    @fileName: "../fonts/ProximaNova-@{fontWidth}";
    @font-face {        
        font-family: '@{fontName}';
        font-weight: 400;
        font-style: normal;
        src: url('@{fileName}.eot');
        src: url('@{fileName}.eot?#iefix') format('embedded-opentype'),
             url('@{fileName}.woff') format('woff'),
             url('@{fileName}.ttf') format('truetype'),
             url('@{fileName}.svg#@{fontName}') format('svg');
    }
}

.fontFace('Regular');
.fontFace('RegularIt');
.fontFace('Bold');

@fontName: Proxima Nova;
@font:          "@{fontName} Regular";
@font_italic:   "@{fontName} RegularIt";
@font_bold:     "@{fontName} Bold";

h2 {
    font: 400 50px @font_bold;  
}

---

而且，同样的事情，在SASS/SCSS中也可以实现：

@mixin font ($weight) {
    @font-face {
        $fontName: 'Proxima Nova ' + $weight;
        $fileName: '../fonts/ProximaNova-' + $weight;

        font-family: $fontName;
        font-weight: 300;
        font-style: normal;
        src: url($fileName + '.eot ');
        src: url($fileName + '.eot?#iefix') format('embedded-opentype'),
           url($fileName + '.woff2') format('woff'),
           url($fileName + '.ttf') format('truetype'),
           url($fileName + '.svg##' + $fontName) format('svg');
    }
}
@include font(regular);
@include font(bold);
@include font(light);

$fontName: 'Proxima Nova ';
$font: $fontName + regular, "Helvetica Neue", sans-serif;
$font_bold: $fontName + bold;
$font_light: $fontName + light;

h2 {
    font: 300 15px $font_bold;
}

- GrimCap

Answer 6

我知道这个问题有点老了，但我跟随Mészáros Lajos的答案。它需要考虑一些目前没有的东西：

1. 你的字体族和字体文件名不需要匹配；事实上，对于“粗体”和“斜体”，你可能想使用样式链接。参见：http://www.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/。这可以防止“伪粗体”和“伪斜体”的出现，当浏览器不理解你的字体之间的关系时（例如，它不知道在使用MyFont的文本中有一个强标记时应该使用MyFont-Bold字体），就会发生这种情况。
2. 字体族名称和SVG ID不需要匹配；例如，文件montserrat-regular.svg可能具有SVG ID montserratregular。是的，你可以通过重命名文件来解决这个问题，也许你应该这样做，但如果你从远程获取文件（CDN），你可能没有这个便利。
3. 个人喜好，我改变了变体和权重的顺序。在CSS字体简写中，变体首先出现，所以为了保持一致，我把它放在了这里的第一位。
4. 同样是个人喜好，我删除了默认值，因为我不想在没有明确指定的情况下调用此方法。当你必须指定所有内容时，你不太可能忘记你确实需要更改该字体的SVG ID。
5. 由于Chrome-windows目前不支持反锯齿WOFFs，我改变了顺序，将SVG移动到EOT之后（旧版IE需要先使用EOT，否则会出错）。Credit

---

.fontface(@family, @filename-base, @style, @weight, @svgID){
    font-family: @family;
    src:url('@{filename-base}.eot');
    src:url('@{filename-base}.svg#@{svgID}') format('svg'),
        url('@{filename-base}.eot?#iefix') format('embedded-opentype'),
        url('@{filename-base}.woff') format('woff'),
        url('@{filename-base}.ttf') format('truetype');
    font-weight: @weight;
    font-style: @style;
}

---

- Carl Bussema

Answer 7

这是我为SASS编写的版本，已经测试并且可用。

@mixin fontface($family: sans-serif, $weight: normal, $style: normal, $path: '../fonts', $filename: 'font'){ @font-face{ font-family: $family; src:url('#{$path}/#{$filename}.eot'); src:url('#{$path}/#{$filename}.eot?#iefix') format('embedded-opentype'), url('#{$path}/#{$filename}.woff') format('woff'), url('#{$path}/#{$filename}.ttf') format('truetype'), url('#{$path}/#{$filename}.svg#icon') format('svg'); font-weight: $weight; font-style: $style; } }

- Karl

---

这个问题涉及到 LESS。你应该考虑找到一个关于 SASS 的类似问题，将这个答案发布在那里，并删除这个答案。 - Chris Moschini