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

Posted 2023-02-22

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

【英文标题】：How to add and use Local custom font in a Laravel+ TailwindCss+ Vuejs project?

【发布时间】：2021-06-09 05:49:01

【问题描述】：

正如标题所示，我正在尝试在我的项目中添加和使用我自己的自定义字体，我使用 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

所以我的问题是：

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

【参考方案1】：

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

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

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

【讨论】：

非常感谢您回答我的问题。你能告诉我在哪里可以了解有关 Laravel 文件系统和其他与此类问题相关的主题的更多信息吗？

对不起，没有。我从未使用过 Laravel。