vue 项目引入字体文件

最新推荐文章于 2025-09-27 18:46:52 发布

原创

最新推荐文章于 2025-09-27 18:46:52 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细介绍了在Vue项目中如何正确引入并使用字体文件，经过亲测，该方法无误且不会导致任何错误。主要步骤包括两个阶段：第一步和第二步。在完成这些步骤后，字体文件可以顺利应用到项目中，实现预期效果。

亲测无误，不会报错

第一步

在这里插入图片描述

第二步

在这里插入图片描述

/* 引入字体 */
@font-face {
    font-family: 'FZCHYJW';
    src: url('FZCHYJW.ttf');
    font-weight: normal;
    font-style: normal;
}

@import "./font.css";

使用

font-family: 'FZCHYJW';

效果图
在这里插入图片描述

在这里插入图片描述

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

施玥喵

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue中引入外部字体

专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。

05-31

1万+

简述使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...

[Vue]Vue项目引入自定义字体

DaftJayee的博客

09-01

1012

字体准备：去谷歌字体网下载想要的字体文件：（http://www.googlefonts.cn/）其实也可以不下载直接引入，但是最好是下载下来后期部署到自己的静态服务器，因为用户不一定能访问到googlefonts或者访问速度很慢方法一： 1.将下载的字体文件存到： 2.在index.html中引入： <link rel="stylesheet" href="<%= BASE_URL %>fonts/daysOne.css"> 3.在想要引入字体的vue文件中设置font-

参与评论您还未登录，请先登录后发表或查看评论

Vue中引入字体

m0_68940359的博客

12-27

688

1、将字体放入vue文件中，例如。

vue项目引入字体文件

qq_45228330的博客

03-29

3061

vue项目引入字体文件在自己的idea中选好字体，打包上线发现字体效果没有显示出来。于是查了vue引入字体文件的方法，记录记录。 1.下载字体文件，并放到项目文件中 2.创建font.css文件，写入如下代码 //font.css文件代码 @font-face { /*给字体命名*/ font-family: 'buer'; /*引入字体文件*/ src: url('./buer.ttf'); font-weight: normal; font-styl

vue中引入字体

weixin_40856652的博客

06-30

9119

vue中引入字体

vue引入字体

qq_43840793的博客

10-30

740

这个与两个字体，优设标题黑和DIN字体，font.css用于给字体取名，将字体引入网站。1、在src/assets文件夹下新建一个font文件夹，放入字体文件与配置文件。在main.js引入。

解决vue 项目引入字体图标报错、不显示等问题

12-02

问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错：解决方法为：把字体引入方式改为...以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希

vue引入字体文件

qq_48245893的博客

07-09

487

vue字体引入

Vue引入自定义字体

qq_60542647的博客

04-19

1296

创建global.css文件。在main.js中引入。2.在需要的地方使用。3.整个项目中使用（

Vue项目中引入外部字体文件

蓝胖子的博客

04-03

1793

Vue项目中引入外部字体文件

Vue中引入外部字体并使用

nunumaymax的博客

06-25

1433

1.下载需要引入的字体包；2.创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css；3.在 font.css 文件中引入想要的字体；4.在项目中全局引入写好的 font.css 文件；5.那么现在就可以在 vue 组件中随意使用引入的字体样式啦！

vue项目引入字体.ttf

WebDestiny的博客

09-30

2144

一、下载完字体后在src下新建common文件，文件夹中包含以下文件（FZCYJ.ttf 为例）二、打开font.css @font-face { font-family: 'myfont'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; }...

Vue3中引入外部自定义字体

04-20

6183

免费商用字体下载（中文字体、繁体字体、英文字体、日文字体、韩文字体），含有授权说明，不定期更新，诚信分享。将下载的ttf文件放到 src/assets/font 文件夹中。

vue项目里面引入字体

agwq1908的博客

01-23

417

1 <style> 2 @font-face { 3 font-family:'avenir'; 4 src:url('./style/font/AvenirHeavy.ttf') format('truetype'); 5 } 6 </style> 在APP.vue中加入这段代码 1 .PV{ 2 ...

vue项目引入字体

最新发布

ioncannontic的博客

09-27

376

前端引入字体

在 Vue 项目中引入字体文件的详细指南

前端程序猿的博客

10-14

4370

在 Vue 项目中引入自定义字体文件，可以通过多种方式实现。这取决于你的项目结构、构建工具以及字体文件的来源。本文将详细介绍如何通过不同方法引入本地字体文件以及从外部引入字体。

vue项目中引入字体文件样式

m0_61476911的博客

08-16

703

vue项目中自定义字体样式

vue项目引入外部字体使用

小刘的日常bug记录

06-01

541

发现一个字体库，里面字体还挺好看的。

vue3引入字体

03-18

<think>好的，用户想了解在Vue 3中如何引入字体。首先，我需要回忆一下在Vue项目中引入字体的一般方法，然后结合Vue 3的具体情况来整理步骤。首先，通常引入字体有两种主要方式：通过CSS的@font-face规则或者使用第三方库。用户可能更想知道的是基本的方法，也就是使用@font-face。不过，可能需要考虑字体文件的存放位置，比如放在assets目录下还是public目录下，这在Vue项目中可能会有不同的处理方式。接下来，我需要确定在Vue 3中是否有什么特别需要注意的地方。Vue 3的项目结构通常使用Vue CLI或Vite创建，不同的构建工具可能会有不同的配置方式。比如，如果使用Vite，可能需要检查路径是否正确，或者是否需要配置别名。但一般来说，基本的字体引入方法应该和普通的CSS引入方式相似。然后，用户可能会遇到字体文件路径的问题。在Vue的单文件组件中，如果使用相对路径引用字体文件，可能需要根据文件位置调整路径。比如，如果字体文件放在assets/fonts目录下，那么在CSS中使用@font-face时，可能需要使用~@/assets/fonts/这样的路径，特别是在使用Webpack的项目中，因为Webpack需要使用别名来处理路径。而如果是Vite项目，可能不需要波浪线，直接使用相对路径或者别名@。另外，用户可能想知道如何在全局引入字体，这样所有的组件都可以使用。这时候可以考虑在main.js或main.ts中导入一个全局的CSS文件，或者直接在App.vue的样式中引入，这样全局生效。还有一种情况是使用第三方字体库，比如Google Fonts。这时候用户只需要在index.html中通过link标签引入，或者在CSS中使用@import，然后在组件中直接使用字体名称即可。这种方法可能更简单，不需要处理本地字体文件，但需要网络连接。还需要考虑字体格式的兼容性问题，比如提供多种格式的字体文件（如woff2、woff、ttf等），并在@font-face中按顺序声明，浏览器会选择支持的格式。这可能对用户来说也是有用的信息。最后，可能需要提醒用户在引入字体后如何应用，即在CSS中使用font-family属性，并确保名称一致。如果用户遇到字体不生效的问题，可能需要检查路径是否正确，控制台是否有404错误，或者字体格式是否被支持。总结一下，回答的步骤可能包括：放置字体文件、编写@font-face规则、全局或局部引入样式、应用字体到元素，以及可能的第三方字体库使用方法。同时，需要根据用户使用的构建工具（如Vue CLI或Vite）调整路径的写法，并提醒常见问题。</think>在Vue3中引入自定义字体可通过以下步骤实现： ### 一、基础方法：CSS @font-face 1. **放置字体文件** ```bash public/ fonts/ myfont.woff2 myfont.woff src/ assets/ fonts/ # 或存放在assets目录 myfont.ttf ``` 2. **创建字体CSS文件** ```css /* src/assets/css/fonts.css */ @font-face { font-family: 'MyCustomFont'; src: url('../fonts/myfont.woff2') format('woff2'), url('../fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` 3. **全局引入（推荐方式）** ```javascript // main.js import '@/assets/css/fonts.css' ``` 4. **组件中使用** ```vue <template> <div class="custom-font">示例文字</div> </template> <style scoped> .custom-font { font-family: 'MyCustomFont', sans-serif; } </style> ``` ### 二、路径处理要点 - **Webpack项目**（Vue CLI创建）：使用`~@`别名： ```css src: url('~@/assets/fonts/myfont.woff2') ``` - **Vite项目**：直接使用相对路径： ```css src: url('../fonts/myfont.woff2') ``` ### 三、使用Google Fonts（远程字体） ```html  <head> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> </head> ``` ```css /* 直接使用 */ body { font-family: 'Roboto', sans-serif; } ``` ### 四、常见问题排查 1. **404错误**：检查开发者工具Network面板确认字体文件是否成功加载 2. **路径问题**：不同构建工具的路径解析规则不同 3. **字体格式**：现代浏览器优先使用woff2格式 4. **字体加载**：可添加`font-display: swap`避免布局偏移 ### 五、最佳实践建议 1. 提供至少woff2和woff两种格式 2. 使用子集字体减少体积 3. 预加载关键字体： ```html <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> ``` 通过以上步骤即可在Vue3项目中正确引入并使用自定义字体，根据实际需求选择本地或远程字体方案。

vue 项目引入 字体文件

第一步

第二步

vue 项目引入字体文件