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

Question

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

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

样式。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中的最终编译目录中。此外，自动文件版本控制将以这种方式进行。