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

Question

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

我尝试了很多方法，但 唯一一次显示我的字体 是我在 中使用了 <style> 标签。blade.php 里面有正常的 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");
      }  
}

*我尝试了很多网址，但 none 成功了

\tailwind.config.js

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

和我在 Vuejs 组件中使用的 class 名称：font-irsans & font-pln

所以我的问题是：

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

Answer 1

您的字体文件需要位于项目 public 根目录中名为 font 的目录中，即：yourproject.com/font/ 因为这是您在字体中指定的内容-人脸宣言.
你不需要，Tailwind 不关心你的字体文件在哪里，或者即使它们存在，Tailwind 只是创建一个 class 来引用你的字体系列您提供的名称，例如：.font-irsans.

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

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

How to add and use Local custom font in a Laravel+ TailwindCss+ Vuejs project?

css

font-face

laravel

vue.js

tailwind-css