admin管理员组文章数量:1594755
遇到要在项目中引入一些外部字体,我使用的是思源字体
cli2的我还没试过,现在的方法是cli3的, 不用配置config文件就可以
第一步: 去下载想要引入的字体的字体包,找ui要或者网上自己去搜
第二步:将要的字体放在资源目录下,看自己项目需求要放哪里,创建一个css文件
第三步: 在fonts.css文件中引入想要的字体
// 这是fonts.css 可以设置多种字体
// 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字
@font-face {
font-family: 'Medium';
src: url('./SourceHanSansSC-Medium.otf');
}
@font-face {
font-family: 'Regular';
src: url('./SourceHanSansSC-Regular.otf');
}
第四步:在项目的main.js文件中引入刚写好的css文件,路径记得对应上自己项目中的路径
// main.js中引入外部字体
import './assets/fonts/fonts.css'
最后一步: 直接在vue文件中的样式添加字体样式
.text {
font-family: 'Regular'; // 这里的Regular是引入时的自定义名字
}
如果不行的话就还是看下路径有没有问题吧~
如果有误,可留言提示,谢谢~
版权声明:本文标题:vue-cli3.0 引入外部字体并使用 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1728202675a1149588.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论