在CSS导入上设置`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';

我需要将这些字体设置为以Web.dev suggests here的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-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';