vue使用阿里字体教程（引入外部字体）

阿里iconfont地址：https://www.iconfont.cn/

1.点击字体库选择字体

2.下载子集

3.在vue项目中src–>assets–>fonts中放入刚下载的两个文件(如果没有我这样的目录自己建一个就行)

4.fonts中新建font.css文件，引入字体

4.main.js中引入

5.随便哪里去用就完事了（举例是类选择器）

PS：关于遇到build到服务器后woff字体失效问题
打开 build --> webpack.prod.conf.js

module: {
　　rules: utils.styleLoaders({
　　　　sourceMap: config.build.productionSourceMap,
　　　　extract: true,
　　　　usePostCSS: true
　　})
},

把 extract : true
改成 extract: false
就能正常显示了

vue使用阿里字体教程（引入外部字体）相关推荐

html中如何引用其外部字体,css引入外部字体
第一步:首先获取要使用字体的三种文件格式.EOT..TTF或.OTF..SVG,确保能在主流浏览器中都能正常显示该字体. .EOT,适用于Internet Explorer 4.0+ .TTF或.OT ...
vue-cli3.0 引入外部字体并使用
遇到要在项目中引入一些外部字体,我使用的是思源字体 cli2的我还没试过,现在的方法是cli3的, 不用配置config文件就可以第一步: 去下载想要引入的字体的字体包,找ui要或者网上自己去搜第 ...
php计算时间差js,JavaScript如何计算时间差（引入外部字体文件）？
本章给大家带来用JavaScript如何计算时间差(引入外部字体文件)?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. JavaScript Date() 对象: new Date() ...
ionic4 引入外部字体ttf
ionic4 引入外部字体ttf 一般在全局CSS文件variable.scss中添加自定义字体. 第一步:把我们需要引入的字体放到项目的静态资源里面我把字体放到了assets/font文件夹里第 ...
css3如何链如外部字体,微信小程序引入外部字体总结（针对安卓加载缓慢问题）...
最近有个项目需求,须要改变小程序全部文字的字体. 查了资料后发现,本地加载字体文件致使小程序太大.动态加载文件,苹果然机完美,可是在安卓的真机上引入的外部字体加载会很慢,会有很明显的默认字体切换到外部 ...
对android小程序的结论,微信小程序引入外部字体总结（针对安卓加载缓慢问题）...
最近有个项目需求,需要改变小程序所有文字的字体. 查了资料后发现,本地加载字体文件导致小程序太大.动态加载文件,苹果真机完美,但是在安卓的真机上引入的外部字体加载会很慢,会有很明显的默认字体切换到外部 ...
网站如何引入外部字体 [可自定义]/个人博客/爱骇客
很多人都知道,默认的微软雅黑是不可以商用的企业做站有时候会考虑到这点,昨天百度了下,看到说思源黑体阔以,总之不涉及侵权就ok了,网站引入外部字体自定义见下图. 关于思源黑体思源黑体是Adobe与Go ...
项目开发中引入外部字体库
前端web项目下载字体库(如:方正兰亭中黑_GBK.ttf) 全局引入 @font-face {font-family: "方正兰亭中黑_GBK";src: url(" ...
前端页面引入外部字体 @font-face 的使用方法
通过 @font-face 属性来引入外部字体代码如下 @font-face {font-family: 'arailRegular';src: url('../font/Arial-Black.t ...
微信小程序引入外部字体
微信小程序引入外部字体前言 wx.loadFontFace Base64 尾巴前言微信小程序由于打包体积限制,不支持直接引入字体文件.但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两 ...

vue使用阿里字体教程（引入外部字体）

vue使用阿里字体教程（引入外部字体）相关推荐

最新文章

热门文章