WebFont与页面font-icon图标研究

当你打开（绝大部分）网站，页面上将会有许多形形色色的小图标（icon），适当的icon的可以达到一图胜千言的目的，使网页的表现效果更佳。

关于页面icon的制作，比较传统的方法是，让设计师去设计一个个的小图片，然后网页程式员再将设计好的icon放到页面上适当的位置。不过，随着这些年Web前端技术的迅猛发展，现在有一种新的方案去制作页面icon，那就是webfont。

页面icon

什么是页面icon

天猫商城中左侧的导航栏中，每一个购物频道都有一个小小的图标，这些小图标就是页面icon的一种表现方式。

除此之外，页面icon还有多种表现形式，可能出现在页面的任何位置。

我们再来看看百度域下的资源文件，其中有一个图片文件。

传统icon的制作

首先要求设计师设计好大小合适的小图标，然后将这些小图标按照一定的顺序和方式合并在一起（这种方式称为css sprite，或者图片精灵），然后网页程序员通过书写css代码来控制相应元素的background-position属性，以达到不同元素显示不同的小图标。

这种方式下，需要使用小图标的页面元素的css规则一般这样定制：一个表示图标类的icon样式，以及表达不同小图标的自定义类名，比如icon-home，icon-user。当然，具体css类名的命名规范是不定的。一般地，icon和icon-*的样式内容如下，

1. .icon {
2. background-image: url(...)
3. }
4. .icon-home {
5. background-position: 0 0;
6. }
7. .icon-user {
8. background-position: 0 10px;
9. }

这种制作和使用icon的方式现在仍然有许多企业和网页正在使用，也是一种比较常规的方式。这种方式在书写css代码需要有一定的耐心，要匹配好各个icon的background-position属性。

值得一提的是，这种方式有一个不可避免弊端，就是，可能页面的icon需要两种以上的尺寸或者icon要发生变更。前者一般会要求设计师产出多套的icon，因为直接对图片进行缩放在网页上的表现并不是很好；后者可能就要重写之前的css代码了，因为可能图片雪碧后的position也发生了变化。

---

webfont与@font-face

什么是webfont

随着这些年Web前端技术的迅猛发展，web font技术逐渐成熟。那么什么是web font呢？

web font，又称之为在线字体或者网络字体，是CSS3中的一个模块，主要是把自定义的特殊字体嵌入到网页中。无需安装，无需下载，直接在线使用。

@font-face语法

web font技术需要通过CSS的@font-face语句引入在线字体。所以这里我先说一下@font-face的相关内容。

@font-css是CSS3中的一个模块，通过它可以将自定义的字体嵌入到前端网页中。随着@font-face的出现，标识着我们在web开发的过程中可以使用除了web安全字体之外的自定义字体，使页面的展现更加多样化。

值得一提的是，@font-face这个CSS3模块早在IE4中就已经被支持了。有点意外。

我们先来看看@font-face的语法，

1. @font-face {
2. font-family: <your-webfont-name>;
3. src: <source> <format> [, <source> <format>];
4. [font-weight: <weight>;]
5. [font-style: <style>;]
6. }

值得注意的有两点，一个是font-family属性，一个是src属性。前者是自定义webfont的名字，后者是引用字体的路径。其中src中<format>字段是用来标识字体格式帮助浏览器识别。

说了这么多的理论，下面让我们来一段具体的CSS代码，了解下这个@font-face到底是如何定义的。

1. @font-face {
2. font-family: 'icomoon';
3. src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
4. src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
5. url('fonts/icomoon.woff') format('woff'),
6. url('fonts/icomoon.ttf') format('truetype'),
7. url('fonts/icomoon.svg') format('svg');
8. font-weight: normal;
9. font-style: normal;
10. }

这样我们自定义的web font就成功了。然后就可以在页面中正常使用了。比如，

1. div.title {
2. font-family: 'icomoon'
3. }

如果不出任何的意外的话，你将会得到自定义的字体效果。

自定义字体

说到这里，如果大家自己动手实验一番的话，就会发现一个致命问题：我去哪里获得这些自定义字体啊？

目前有三种途径来获取这些字体，

• 去免费的网站下载字体
• 去收费的网站购买字体使用授权
• 有设计背景，自己设计字体

针对前两种方式没什么好说的，针对第三种方案，可能相关门槛就高了一点，需要一些设计背景。如果有兴趣，可以参阅这篇文章。

---

webfont的更多内容

收集自https://www.w3cschool.cn/css_series/css_series-qx2k24qe.html