在 scss 导入上设置"字体显示:交换"

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。

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

@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-display属性。您必须在导入字体真棒之前声明它。喜欢这个

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