如何在SCSS中生成不同权重的字体样式_通过数组循环生成Font-Face列表-css教程-PHP中文网

scss中用@each循环生成多字重@font-face规则最简洁，但需确保每个字重对应独立字体文件、正确命名、配font-display: swap，并通过开发者工具验证实际加载字重。

如何在scss中生成不同权重的字体样式_通过数组循环生成font-face列表

SCSS中用`@each`循环生成多字重`@font-face`规则

直接写死多个@font-face太重复，用@each遍历权重数组是最干净的解法。关键不是“能不能”，而是“怎么保证浏览器真加载对应字重”。

必须确认每个字重都有独立的字体文件（比如Oswald-300.woff、Oswald-400.woff、Oswald-700.woff），不能只靠一个文件硬设font-weight
font-display: swap建议始终加上，避免FOIT（字体阻塞渲染）
路径拼接要用asset_url()（Rails）或url()（纯CSS/webpack），别手写相对路径，否则编译后404

示例：

$weights: (300, 400, 600, 700);
@each $w in $weights {
  @font-face {
    font-family: 'Oswald';
    src: asset_url('Oswald-#{$w}.woff2') format('woff2'),
         asset_url('Oswald-#{$w}.woff') format('woff');
    font-weight: $w;
    font-style: normal;
    font-display: swap;
  }
}

为什么`font-weight: 600`写了却没变粗？

不是SCSS写错了，是字体文件本身没提供600这一档——浏览器只能 fallback 到最接近的可用字重（比如400或700），视觉上毫无变化。

打开开发者工具 → Elements → 选中文字 → 右侧“Fonts”面板，看“Actual font”后面标注的 weight 是多少
Google Fonts链接里漏了wght@600参数，就别指望font-weight: 600生效
本地字体用font-squirrel生成kit时，勾选“Select weights”要明确包含600，否则生成的包里根本没有

用`@mixin`封装多字重+多样式（斜体/可变字体）

如果还要支持italic或可变字体轴（如wdth、opsz），硬套@each会嵌套爆炸。用@mixin收口更可控。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

传入$family、$weights、$styles: (normal, italic)三个参数，内部双层@each
对italic变体，文件名要带-Italic后缀，且font-style: italic必须显式声明
可变字体不用列一堆@font-face，一个就够了：font-weight: 100 900; + font-stretch: 75% 125%;

片段示意：

@mixin font-faces($family, $weights, $styles: (normal)) {
  @each $w in $weights {
    @each $s in $styles {
      $suffix: if($s == normal, '', '-Italic');
      @font-face {
        font-family: $family;
        src: asset_url('#{$family}-#{$w}#{$suffix}.woff2') format('woff2');
        font-weight: $w;
        font-style: $s;
        font-display: swap;
      }
    }
  }
}
@include font-faces('Oswald', (300, 400, 700), (normal, italic));