在 scss 导入上设置 `font-display: swap`

Question

我正在我的文件中导入 Fontawesome scss，我这样做：

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

我需要设置这些字体以使用Web.dev 建议的swap方法进行加载。

我尝试在导入后添加显示属性，但没有成功：

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: swap;
}

Answer 1

font Awesome 中已经有一个可重写的变量来更改font-display属性。你必须在导入 font Awesome 之前声明它。像这样

$fa-font-display: swap;

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';