vue 项目中引入 .ttf 字体

最新推荐文章于 2024-05-08 16:50:19 发布

＊且听风吟

最新推荐文章于 2024-05-08 16:50:19 发布

阅读量2.9k

点赞数 3

分类专栏： # Vue 2.x 文章标签： css

本文链接：https://blog.csdn.net/HH18700418030/article/details/120868677

版权

本文介绍了在Vue项目中如何引入.TTF字体文件，包括下载字体文件、放置到assets、创建font.css，以及在main.js中引入样式，从而实现自定义字体效果。

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

开发中发现，UI设计图中的有些字体效果，需要引入字体文件才能生效。于是，就自己找了下方法，顺便记录下来。

1、下载需要的字体 .ttf 文件；

2、将字体文件放到 assets 文件夹中：
在这里插入图片描述
3、在当前文件夹中创建一个font.css文件：

font.css：

@font-face {
   
  /* 重命名字体名 */
  font-family: 'OPPOSansB';
  /* 引入字体 */
  src: url('./fonts/OPPOSans-B.ttf')

关注