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

Question

我在我的 scss 文件中导入 Fontawesome，我是这样做的:

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

我需要将这些字体设置为使用 swap 方法加载 Web.dev suggests here .

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

@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';