最近开发的一个项目中,用到了一些特殊的字体,这个字体是系统中没有的,需要我们自己引入,具体的操作步骤如下所示:
1.下载你需要的特殊字体可以在这里下载你需要的字体
比如我下载的是这个字体:
![](https://img.haomeiwen.com/i25683957/8e25f7ba6004b05d.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'
}
这样就可以让你的页面内容具有不一样的字体样式了
网友评论