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中的字体编译。因此字体不会自动复制到 public 文件夹中，必须手动将字体复制到正确的路径中，不建议这样做。要启用自动字体操作，您可以使用：

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

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

Laravel 8 add downloaded fonts and use them

fonts

compilation

sass

laravel

webpack