美文网首页
vue项目使用特殊字体

vue项目使用特殊字体

作者: 5cc9c8608284 | 来源:发表于2022-04-25 20:14 被阅读0次

最近开发的一个项目中,用到了一些特殊的字体,这个字体是系统中没有的,需要我们自己引入,具体的操作步骤如下所示:

1.下载你需要的特殊字体可以在这里下载你需要的字体

比如我下载的是这个字体:


font.png

2.将刚才下载好的字体保存到你的项目中的某个文件夹下,我保存在了src/assets/font

3.在项目的样式文件中加入以下代码,我写在了@/styles/common.css:

@font-face{
  font-family:'字体的名称';
  src:url('字体文件所在的路径')
}

比如我的就可以这样写:

@font-face{
  font-family:'Adorable';
  src:url('@/assets/font/Adorable.TTF')
}

4.在main.js中引入刚才的样式文件

import  '@/styles/common.css'

5.在需要的地方使用该字体

.demo{
  font-family:'Adorable'
}

这样就可以让你的页面内容具有不一样的字体样式了

相关文章

网友评论

      本文标题:vue项目使用特殊字体

      本文链接:https://www.haomeiwen.com/subject/dxehyrtx.html