vue-cli3.0 引入外部字体并使用

遇到要在项目中引入一些外部字体,我使用的是思源字体

不用配置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是引入时的自定义名字
 } 
如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注