如何在 Laravel TailwindCss Vue Js 项目中添加和使用本地自定义字体？

Question

正如标题所示，我正在尝试在我的项目中添加和使用我自己的自定义字体，我使用 Laravel 8 作为后端，Vuejs 3 作为前端，tailwindCSS 2 作为我的 CSS 框架。

我尝试了很多方法，但唯一一次显示我的字体是在我的 .blade.php 中使用<style> 标记和普通 css (@font-face) & ids 在里面。 我也尝试了 "@layer base" 方式（如官方文档中所述），但它不起作用

\resources\css\app.css

@layer base {
        @font-face {
        font-family: IRANSans;
        font-weight: 900;
        src:url(/fonts/IRANSansWeb_Black.woff2) format("woff2"), 
        url(/fonts/IRANSansWeb_Black.woff) format("woff"),
         url(/fonts/IRANSansWeb_Black.ttf) format("truetype");
      }
      
      @font-face {
        font-family: PlatNomor;
        font-weight: 900;
        src:url(/fonts/PlatNomor.woff2) format("woff2"), 
        url(/fonts/PlatNomor.woff) format("woff"),
         url(/fonts/PlatNomor.ttf) format("truetype");
      }  
}

*我尝试了很多网址，但都没有成功

\tailwind.config.js

theme: {
    fontFamily: {
      'irsans': ['IRANSans'],
      'pln': ['PlatNomor']
    },

以及我在 Vuejs 组件中使用的类名：font-irsans & font-pln

所以我的问题是：

1. 我应该把我的字体文件放在哪里？
2. 如何让 tailwind 知道我的字体文件在这个项目中的位置？

Answer 1

1. 您的字体文件需要位于项目公共根目录下名为 font 的目录中，即：yourproject.com/font/，因为这是您在 font-face 声明中指定的内容。

2. 您不需要，Tailwind 不关心您的字体文件在哪里，或者即使它们存在，Tailwind 也会简单地创建一个通过您提供的名称引用您的字体系列的类，例如：.font-irsans。

另外，指定 truetype 版本是没有意义的，没有浏览器会使用它。 .woff 和 .woff2 足以覆盖所有最近的浏览器。