我正在尝试定义字体系列。我有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);
}