Laravel 8 添加下载的字体并使用它们

Question

我刚刚升级到 laravel 8，需要使用字体建立一个网站。我已经下载了字体并将它们放在字体文件夹中的资源文件夹中。之后我将它们添加到我的css中，但它似乎不起作用。我错过了一步，是否需要先编译bij webpack？我做错了什么？

字体： https://fontsgeek.com/fonts/Jot-Regular https://fonts.google.com/specimen/Roboto

style.scss：

@font-face {
    font-family: JotRegular;
    src: local('/fonts/JotRegular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: local('/fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

h2{
    font-size: 2.2rem;
    font-family: JotRegular;
}

Answer 1

使用local 加载字体会绕过 webpack 中的字体编译。所以字体不会自动复制到公用文件夹中，字体必须手动复制到正确的路径，不推荐。要启用自动字体操作，您可以使用：

@font-face {
    font-family: JotRegular;
    src: url('../fonts/JotRegular.ttf'); // remember that font file path must be relative to the current css file. not the final compiled folder
    font-weight: normal;
    font-style: normal;
}

这样webpack会自动将字体文件复制到最终编译的目录public中。此外，自动文件版本控制将通过这种方式进行。