vue引入字体文件踩坑

梦里梦外; 2023-01-22 06:50 7阅读 0赞

**vue引入字体文件的正常步骤走一遍**  
**1 . 下载字体文件并放入项目中**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
**2 . 新建一个文件，`font.css`（不新建也行，.less和.scss也行）只要能引入到单页面或者`main.js`中就可以**  
**注意！！！：这个`css`文件一定要和字体文件在同级目录下，要不然可能会出现字体不起作用的情况**  
**`font.css`文件里就这样写就完事了，压根不用写什么`format`后缀**

@font-face { 
      font-family: 'D-DIN';
      src: url('D-DIN.ttf');
      font-weight: normal;
      font-style: normal;
    }

**带`format`后缀，不同后缀的字体文件，需要配置的`format`后缀都不一样**  
**文字后缀名必须小写**

@font-face { 
      font-family: 'D-DIN';
      src: url('D-DIN.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

**3 . 引入并使用即可**  
**`font-family: "D-DIN"`后面的字体名，加不加引号都一样**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221020/e13fd195fe964b2cae004584d7077a37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221020/315babfaba574859bf5f0b9f976f5312.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-cli3引入第三方字体文件

1，在vue-cli项目目录下创建vue.config.js文件 module.exports = \{ module: \{ rules:

素颜马尾好姑娘i/ 2023年06月20日 06:48/ 0 赞/ 124 阅读

相关 vue踩坑记

从oneNote上转过来，方便查看： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

ゝ一世哀愁。/ 2023年06月11日 03:12/ 0 赞/ 57 阅读

相关 IDEA踩坑-类文件存在却无法引入

现象开发中有时候会遇到，一个类在项目空间中明明存在，在别的类却无法引入的情况。 ![如图这种情况][watermark_type_ZmFuZ3poZW5naGVpd

雨点打透心脏的1/2处/ 2023年01月23日 11:48/ 0 赞/ 168 阅读

相关 vue引入字体文件踩坑

vue引入字体文件的正常步骤走一遍 1 . 下载字体文件并放入项目中 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

梦里梦外;/ 2023年01月22日 06:50/ 0 赞/ 8 阅读

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

字体准备：去谷歌字体网下载想要的字体文件：（http://www.googlefonts.cn/）其实也可以不下载直接引入，但是最好是下载下来后期部署到自己的静态

柔光的暖阳◎/ 2022年12月03日 02:22/ 0 赞/ 438 阅读

相关 vue 使用process 踩坑

配置全局process 变量在项目目录下新建文件 .env.xxx xxx是运行环境的名字 .env.devlopment 是默认运行的环境 devlopmen

末蓝、/ 2022年10月31日 12:17/ 0 赞/ 208 阅读

相关 vue引入如何使用不同字体

1.将字体包（比如 Alibaba-PuHuiTi-Regular.ttf）放入assets文件夹里面 2.新建一个css文件，如 index.css(注：要记得在main.

矫情吗；*/ 2022年09月13日 04:06/ 0 赞/ 235 阅读

相关 vue + springmvc 踩坑记录

需求： vue 传递数据到后台，为了节省前台代码，以及方便后台的取值，想要采取传递对象的方式传值。解决方案：前台 vue采用URLSearchParams()对象封

蔚落/ 2022年04月25日 07:38/ 0 赞/ 368 阅读

相关 Vue踩坑记

一、Vue实例 > 生命周期钩子在开发程序的时候，有时候喜欢先不写实现，先将组成的部分定义好，但在写Vue生命周期钩子的时候出现了错误。错误信息vue.es

矫情吗；*/ 2022年02月04日 07:39/ 0 赞/ 558 阅读

相关 vue+echart踩坑记

需求描述：页面中按钮控制上传文件后显示数据，图表显示功能点描述：控制显示隐藏(没上传文件前不显示图表),获取数据渲染图表出现问题： 1. v-if控制显示隐藏发

柔光的暖阳◎/ 2021年11月09日 15:08/ 0 赞/ 471 阅读