多个字体粗细的@ font-face不起作用(SCSS)

时间:2019-02-17 04:25:19

标签: css sass font-face

我正在尝试定义字体系列。我有18个文件,重量从100到900不等,正常和斜体。

我的前六个定义工作正常。即:体重从100到300,正常和斜体。从那时起,它就是行不通的。

我尝试使用纯CSS。我手工编译,输出正确。

// file structure

assets/fonts/
    Poppins-Thin.ttf
    Poppins-ThinItalic.ttf
    Poppins-ExtraLight.ttf
    Poppins-ExtraLightItalic.ttf
    ...
stylesheets/
    _fonts.scss
// _fonts.scss

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;

    $extmods: (
        eot: "?",
        svg: "#" + str-replace($name, " ", "_")
    );

    $formats: (
        otf: "opentype",
        ttf: "tr@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;

    $extmods: (
        eot: "?",
        svg: "#" + str-replace($name, " ", "_")
    );

    $formats: (
        otf: "opentype",
        ttf: "truetype"
    );

    @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
    }

    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}

$poppins-weights: ("Thin", "ExtraLight", "Light", "Regular", "Medium", "SemiBold", "Bold", "ExtraBold", "Black");
@for $i from 1 through length($poppins-weights) {
    @include font-face(Poppins, "../assets/fonts/Poppins-#{nth($poppins-weights, $i)}", 100 * $i, normal, ttf);
    @include font-face(Poppins, "../assets/fonts/Poppins-#{nth($poppins-weights, $i)}Italic", 100 * $i, normal, ttf);
}

0 个答案:

没有答案