字体库(阿里巴巴矢量图标库)使用两三坑
众所周知,“微软雅黑” 是个炸弹,不敢碰。上网一查,有个“思源黑体”,免费,好看,就它了!
字体库有两种使用方法:
本地使用
一、下载字体库
推荐地址:字体天下
网站搜索思源黑体,然后点击下载
二、解压,移动到项目中
解压后选择一个字体copy到项目中,我这边选择的是NotoSansCJK-Regular-1
三、在项目CSS中引入字体
引入代码如下:
@font-face {font-family: 'NotoSansCJK-Regular-1';src: url('./font/NotoSansCJK-Regular-1.otf');}body {font-family: "NotoSansCJK-Regular-1";}
效果图:
细心的朋友可能会发现,这样引入有一个缺点,字体库有16.6M大小,这是万万不可取的。
办法总比困难多,有三种解决办法:
- 字蛛-一个中文字体压缩器
- 使用线上地址(CDN)
- 使用字蛛后放到线上(ps:没想到吧~)
下面下面我来说说怎么使用线上字体库
线上字体库使用
直接放地址:阿里巴巴矢量图标库
一、选择在线字体
让我们看图说话
1.在输入框输入文字
2.下拉,选择“思源黑体-普通”
3、点击生成字体,查看效果
二、引入字体
鼠标移到下面列表,会有“引用线上地址”和“本地下载”,“本地下载”跟第一种方式一样。
复制代码到style
中
@font-face {font-family: 'webfont';font-display: swap;src: url('//at.alicdn.com/t/webfont_vc91uhbl9nm.eot');/* IE9*/src: url('//at.alicdn.com/t/webfont_vc91uhbl9nm.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('//at.alicdn.com/t/webfont_vc91uhbl9nm.woff2') format('woff2'),url('//at.alicdn.com/t/webfont_vc91uhbl9nm.woff') format('woff'),/* chrome、firefox */url('//at.alicdn.com/t/webfont_vc91uhbl9nm.ttf') format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/webfont_vc91uhbl9nm.svg#思源黑体-普通') format('svg');/* iOS 4.1- */}body {font-family: "webfont";}
效果如下:
细心的朋友可能又发现了一个问题:为什么前两句古诗词的字体跟后面不一样呢?
不要慌
因为在生成字体的时候,只输入了“人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。”这两句诗词,字体库中也就只有这两句诗词中的汉字。
注意: 阿里这个字体生成库,是需要你输入你要使用的汉字,然后生成字体,代码中才能使用。你没有输入生成,但是在项目中使用了其他汉字,并不会使用这个字体库。
字体库(阿里巴巴矢量图标库)使用两三坑相关推荐
- 伪元素使用——字体图标(以阿里巴巴矢量图标库为例)
1.在阿里巴巴矢量图标库中,找到你喜欢的字体图标,选择添加入库(即购物车图标) 2.点击在页面右上方的"购物车" 3.选择"添加到项目",(没有项目可以创建一个 ...
- vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置 引入assets中的图标路径 (7)页 ...
- 如何使用阿里巴巴矢量图标库下载使用字体图标?
1:在百度搜索"阿里巴巴矢量图标库"进入,注册并登录. 2:搜索自己想要的字体图标,然后加入购物车,点击添加至项目. 3:在项目中点击下载至本地,解压缩包. 4:如下图所示,使用l ...
- vue2引入阿里巴巴矢量图标库字体
1.去阿里巴巴矢量图标库官网下载需要的图标 iconfont-阿里巴巴矢量图标库 2.在vue目录下src/assets创建font文件夹,粘贴所下载的字体文件(例如:我的字体文件是:TsangerY ...
- 简单介绍一下阿里巴巴矢量图标库的使用
相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完全免费的,可以在线使用也可以下载到本地使用,而且图标是作为字体插入,不仅可以改变颜色大小,而且在布局方面也非常方便. ...
- vue+element-ui项目引入第三方图标库:阿里巴巴矢量图标库(问题:小方框)
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
- 阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式 在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...
- 【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
- 阿里巴巴矢量图标库(网页)
首先,阿里巴巴矢量图标库网站资源非常齐全,主要包含了 图标库,矢量插画库,3D插画库,动效库,字体库等等,基本能满足小伙伴们日常开发设计需求,里面的所有素材都可以免费使用. 图标库里包含有2300W+ ...
最新文章
- 0基础小白学好JAVA的5个方法
- C++ 中NULL 和 nullptr 的区别
- phpcms标签大全V9
- 2018-2019-1 20189204《Linux内核原理与分析》第三周作业
- 安装mysql冲突_Linux下安装mysql版本冲突问题解决
- Android应用开发—知识点汇总
- check oracle 为空值_索引(index)-Oracle高级知识(3)-数据库(23)
- VB Listview导出到CSV文件函数
- #linux包之sysstat之iostat命令
- Xfce 4.4 beta2
- STM32 易阅读的代码风格
- PHP水果店管理系统,赢通水果店管理系统A3专业版
- timestamp和datetime的区别
- 【UI】优秀的网站欣赏以及分析
- 使用Scrapy爬取电影链接
- X509证书认证原理
- Flutter无限循环滑动的PageView
- 沐风老师3DMAX网球建模教程
- jdbc mysql api_JDBC---一种用于执行SQL的Java API
- 企业信息化建设规划大纲
热门文章
- ROS routerOS 软路由
- 央视报道:全国22家奶粉厂家69批次…
- zxing 生成 Qrcode (二维码)
- APP分发渠道:国内Android市场分析
- linux下 eps怎么打开方式,eps文件怎么用ps打开
- android日记 设计说明,基于Android的掌上校园系统的设计与实现毕业论文.doc
- iphone微信 电脑连接到服务器,简单几步,让 iPhone 无线访问 Windows 传文件
- 年薪50万是一条线,年薪100万又是一条线…...
- 无法定位程序输入点 except_S120变频器的基本定位功能详解,建议收藏
- 基于Starter G120调试