DEV Community
·
在Nuxt.js中使用Tailwind CSS自定义字体
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在Nuxt.js项目中集成Tailwind CSS自定义字体可以提升网页设计的独特性。本文介绍如何将“Dirty Headline 2”字体添加到项目中：下载字体并放入assets/fonts目录，在assets/css/font.css中定义@font-face规则，在nuxt.config.ts中引入CSS文件，并在tailwind.config.js中扩展fontFamily配置，最后在Vue页面中应用新字体。
🎯
关键要点
- 在Nuxt.js项目中集成自定义字体可以提升网页设计的独特性。
- Tailwind CSS简化了自定义字体的集成过程。
- 本文使用的自定义字体是'Dirty Headline 2'。
- 下载并解压'Dirty Headline.ttf'字体文件。
- 在assets文件夹中创建css和fonts子文件夹，并放置相应文件。
- 在assets/css/font.css中定义@font-face规则以引入字体。
- 在nuxt.config.ts中引入CSS文件。
- 在tailwind.config.js中扩展fontFamily配置以使用新字体。
- 在Vue页面中应用新字体以展示效果。
➡️
