CSS中的字体图标

栏目: CSS · 发布时间: 5年前

内容简介:我们在前端开发当中经常使用font-awesome和iconfont等字体图标,今天来说一说字体图标的原理。当浏览器接受HTML文件开始渲染的时候,文档树中的文本都会被转化成对应的unicode编码,然后根据我们设置的font-family到系统中找到对应的字体,再将unicode码渲染成对应的字体样式。如果没有找到或者我们没有设置font-family,那么浏览器就会选择自己默认的字体来渲染。比如我们把有了上面的渲染过程,字体图标的制作就很简单了。

前言

我们在前端开发当中经常使用font-awesome和iconfont等字体图标,今天来说一说字体图标的原理。

浏览器是如何渲染字体的

当浏览器接受HTML文件开始渲染的时候,文档树中的文本都会被转化成对应的unicode编码,然后根据我们设置的font-family到系统中找到对应的字体,再将unicode码渲染成对应的字体样式。如果没有找到或者我们没有设置font-family,那么浏览器就会选择自己默认的字体来渲染。比如我们把 前端开发 四个字转成unicode是 0x524D 0x7AEF 0x5F00 0x53D1 ,在HTML中表示Unicode编码用 &#x0000 的形式,我们把前面的四个Unicode转成该形式写入html文件中,可以发现依然可以解析的。

字体图标原理

有了上面的渲染过程,字体图标的制作就很简单了。

1. 制作字体文件

2. font-face引入字体文件(可以使用本地连接和第三方链接)

3. 使用font-family(HTML实体或者伪元素 :before )

我们目前接触的字体图标包括 iconfont fontAwesom 都是这样的原理,用font-face引入自定义的字体文件,然后对要应用字体的元素约束自定义的 font-family ,最后用伪元素 :before 的content来给定元素的unicode码来设置对应的图标,其实如果我们不用伪元素,直接在元素中输入字符unicode码对应的HTML实体(HTML entity)也可以实现效果, <span class="iconfont icon-alipay"></span> 也可以写成 <span class="iconfont">&#xe63b</span> ,效果一样。

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_958524_6v80ih0o45k.eot?t=1544418917327'); /* IE9*/
  src: url('//at.alicdn.com/t/font_958524_6v80ih0o45k.eot?t=1544418917327#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_958524_6v80ih0o45k.ttf?t=1544418917327') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_958524_6v80ih0o45k.svg?t=1544418917327#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-alipay:before { content: "\e63b"; }

.icon-wechat:before { content: "\e658"; }

.icon-qq:before { content: "\e603"; }

其他实现方法

实现图标的还有其他的方法:

1. image:在最早接触css相信大家还不知道iconfont等,都是用图标来实现的,使用很不方便,并且会增加请求数量(一个图标一个请求),不推荐

2. CSS sprites: 精灵图,即将多个图标放到一个图片上,用background-position来控制图片的位置来显示图标,缺点是不能缩放,并且添加图标麻烦

3. CSS icon:纯CSS写的icon,不是很好,不推荐。

4. SVG:比较流行的方法,矢量图,可以任意缩放添加样式,多个图标也可以放大一个svg文件中。


以上所述就是小编给大家介绍的《CSS中的字体图标》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

REST实战

REST实战

Jim Webber、Savas Parastatidis、Ian Robinson / 李锟、俞黎敏、马钧、崔毅 / 东南大学出版社 / 2011-10 / 78.00元

为何典型的企业项目无法像你为web所开发的项目那样运行得如此平滑?对于建造分布式和企业级的应用来说,rest架构风格真的提供了一个可行的替代选择吗? 在这本富有洞察力的书中,三位soa专家对于rest进行了讲求实际的解释,并且通过将web的指导原理应用到普通的企业计算问题中,向你展示了如何开发简单的、优雅的分布式超媒体系统。你将会学习到很多技术,并且随着一家典型的公司从最初的小企业逐渐成长为......一起来看看 《REST实战》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码