vue项目引入新字体

最新推荐文章于 2024-07-07 00:45:46 发布

wmt-xbyg

最新推荐文章于 2024-07-07 00:45:46 发布

阅读量489

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44269412/article/details/125763353

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文详细介绍了如何将字体文件DS-Digital.TTF放入资源文件夹，创建@font-face规则以引入字体，并在项目中实际应用。步骤包括字体文件管理、样式文件编写及入口样式引入，适合前端开发者学习和实践字体定制。

摘要由CSDN通过智能技术生成

1.把字体库放在文件中

在这里插入图片描述

2.新建字样式文件

文件写入：

@font-face {
  font-family: DS-Digital; //字体名称  可随意指定
  src: url('~@/assets/font/DS-DIGIT.TTF'); //引入对应的字体文件
}
```![在这里插入图片描述](https://img-blog.csdnimg.cn/7d8921354a434bc5a77bc4aaf69530b7.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2e6ee789dd044ec998cf9aeac4749ae8.png)

## 3.在入口样式引入字体样式使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/e3d6db5c3a1c4447bd252e2082a7f4eb.png)