vue2关于引入字体的步骤

1，准备需要的字体文件

2，在静态文件夹下public的static文件夹下新建fonts文件

放入自己的字体文件，

3，在src文件夹下的scss文件下新建fonts.css文件

4在fonts.css文件内自定义字体名称

@font-face {font-family: 'fangzhengfangsong';src: url(../../../public/static/fonts/方正仿宋_GBK_0.TTF);
}
@font-face {font-family: 'fangzhengheiti';src: url(../../../public/static/fonts/方正黑体_GBK.TTF);
}
@font-face {font-family: 'fangzhengxiaobiaosong';src: url(../../../public/static/fonts/方正小标宋_GBK.TTF);
}
@font-face {font-family: 'led';src: url(../../../public/static/fonts/液晶数字字体.TTF);
}

4，在main.js文件内全局注册

5，使用自己新的字体

font-family: 'led';

例如使用自己新增的‘led’字体

vue2关于引入字体的步骤相关推荐

vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
UNIAPP 怎么引入字体
第一种网络字体地址 const url = 'https://sungd.github.io/Pacifico.ttf'loadFontWeb() {uni.loadFontFace({fami ...
使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标? 在说字体图标之前,我们先说一下图片,图片可以让我们的界面更加美丽,但是图片也是有缺点的,比如图片会增加总文件的大小,还会增加额外的HTTP请求,这都会降低网页的性能的.更重要的是图片不 ...
前端项目如何引入字体包? 引入字体包不起效果？
因为设计师用的是IMac电脑,设计图默认使用的字体为 pingFangSC-Regular,这就需要我们做开发的引入苹方字体包以达到和设计图一致的视觉效果,(引入其他字体包同理) 先上个苹方字体 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
python怎么导入文件-Python文件如何引入？详解引入Python文件步骤
python基本语法--引入Python文件 1.新建python文件 :在同目录lib下创建mylib.py和loadlib.py两个文件 2.在mylib.py文件中创建一个Hello的类并且给 ...
pdfjs 字体新增_pdfjs 引入字体失败
这个pdf是宋体使用的pdfjs-dist 2.0.943 ref="container" class="page-container" :style=&qu ...
CSS3 使用@font-face引入字体的兼容性方案及优化
引入第三方字体一定要注意字体版权问题前言承接上文web 端字体兼容性适配之后,好久没有总结 CSS3 引入字体 @font-face 相关的文章了.一是在掌握 @font-face 的基本使用要领 ...

vue2关于引入字体的步骤

vue2关于引入字体的步骤相关推荐

最新文章

热门文章