css技术点二:字体图标(阿里巴巴字体图标使用)
css技术点二:字体图标(阿里巴巴字体图标使用)
- 一、什么是字体图标
- 二、字体图标的好处
- 三、字体图标用法
- 四、字体图标格式介绍
一、什么是字体图标
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
二、字体图标的好处
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器,请放心使用
注意: 字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。
总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
三、字体图标用法
字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为:
- 字体图标的下载
- 字体图标的引入 (引入到我们html页面中)
- 字体图标的追加 (以后添加新的小图标)
- 推荐下载网站:
- icomoon 字库 http://icomoon.io 推荐指数 ★★★★★
IcoMoon 成立于 2011 年,推出了第一个自定义图标字体生成器,它允许用户选择所需要的图标,使它们成
一字型。该字库内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。 - 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用 AI
制作图标上传生成。 重点是,免费!
四、字体图标格式介绍
不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。
- TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体,支持这种字体的浏览器有IE9+、Firefox3.5+、
Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+; - Web Open Font Format(.woff)格式woff字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、
Safari3.6+、Opera11.1+; - Embedded Open Type(.eot)格式.eot字体是IE专用字体,支持这种字体的浏览器有IE4+;
- SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、
Opera10.0+、iOS Mobile Safari3.2+;
五、阿里巴巴字体图标使用步骤
css技术点二:字体图标(阿里巴巴字体图标使用)相关推荐
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- 字体库(阿里巴巴矢量图标库)使用两三坑
众所周知,"微软雅黑" 是个炸弹,不敢碰.上网一查,有个"思源黑体",免费,好看,就它了! 字体库有两种使用方法: 本地使用 一.下载字体库 推荐地址:字体天下 ...
- 三十二、精灵图字体图标
一.精灵图 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此 ...
- 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标 方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
- wordpress菜单显示css字体,WordPress导航菜单图标字体插件font awesome 4 menus
用了wordpress后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果.不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 sh ...
- 项目oms之----阿里巴巴字体图标运用详解 (含:彩色图标svg运用)
思路: 1.找到你需要的阿里巴巴字体图标,添加到 公司字体图标阿里巴巴库,----> 刷新 该icon所在的 阿里巴巴css文件在线链接 2.在项目中 新建一个字体图标css文件 inconfo ...
- 整理在小程序页面样式中引入阿里巴巴字体图标
整理在小程序页面样式中引入阿里巴巴字体库 1.登录阿里巴巴字体图标 2.在小程序项目中配置 1.登录阿里巴巴字体图标 点我阿里巴巴字体图标库 搜索需要的字体图标 将需要的字体图标点击添加到购车中 添加 ...
- 如何使用阿里巴巴字体图标库
1. 阿里巴巴字体图标库官网:http://www.iconfont.cn/ 2.选择自己要用的字体图标,下载到本地. 3.在页面中引用 iconfont.css 这个样式 4.<i class ...
- 微信小程序如何使用阿里巴巴字体图标iconfont?
1.从阿里巴巴字体图标库网站下载iconfont字体文件: 2.打开Transfonter字体转换网站,需要将刚刚下载的iconfont文件里面的woff文件转换成base64位编码的文件: 步骤:上 ...
最新文章
- LeetCode 3 无重复字符的最长子串
- Java GUI编程:swing实现上传tiff文件至hdfs功能
- php 扩展 mysql_PHP链接MySQL的常用扩展函数
- 并查集(图论) LA 3644 X-Plosives
- 并行算法 Parallel Algorithm -- 提高执行效率
- python抓取html中特定的数据库,Python抓取网页中内容,正则分析后存入mysql数据库...
- AjaxFileUploader上传插件 兼容性好
- python 实例创建
- 团队DevOps实践之一
- 日常踩坑:odule ‘tensorflow‘ has no attribute ‘placeholder‘解决方案
- mysql 分页_百万数据下mysql分页问题
- linux 程序 指定网卡,Linux socket绑定指定网卡实现负载均衡
- 新版CSDN编辑器示例(代码及显示样式)
- 初中计算机vb教程视频教程,关于中学信息技术vb的教学
- [论文学习] 一种线性时不变时滞系统的稳定性分析方法(CTCR)
- HDP3.1.5安装包下载地址,百度云下载
- Python爬取电影天堂最新发布电影下载地址
- 深度爬取网易Lofter的爬虫
- 润雅信息完成B轮融资 大数据平台赋能汽车销售
- 阿里云个人镜像仓库日常基本使用
热门文章
- 太傻生活原则是:“无需选择,理解一切,接受一切”--《太傻十日谈》读后感
- 类之间的继承java,Java类与类之间的继承关系
- 【设计模式】Java 语言不同的编程范式-第1章
- idea generated-requests.http 表单请求示例
- xp系统升级Win7系统需要什么条件
- python 异步下载图片_异步Python壁纸爬虫
- 学习java可以做什么?学习java有什么用?
- 笔迹鉴定流程,都需要什么,费用多少?
- 如何利用python进行一次移动平均预测
- 硬件篇——阻容一阶滤波电路