当你打开（绝大部分）网站，页面上将会有许多形形色色的小图标（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-*的样式内容如下，
- .icon {
- background-image: url(...)
- }
- .icon-home {
- background-position: 0 0;
- }
- .icon-user {
- background-position: 0 10px;
- }
这种制作和使用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的语法，
- @font-face {
- font-family: <your-webfont-name>;
- src: <source> <format> [, <source> <format>];
- [font-weight: <weight>;]
- [font-style: <style>;]
- }
值得注意的有两点，一个是font-family属性，一个是src属性。前者是自定义webfont的名字，后者是引用字体的路径。其中src中<format>字段是用来标识字体格式帮助浏览器识别。
说了这么多的理论，下面让我们来一段具体的CSS代码，了解下这个@font-face到底是如何定义的。
- @font-face {
- font-family: 'icomoon';
- src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
- src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
- url('fonts/icomoon.woff') format('woff'),
- url('fonts/icomoon.ttf') format('truetype'),
- url('fonts/icomoon.svg') format('svg');
- font-weight: normal;
- font-style: normal;
- }
这样我们自定义的web font就成功了。然后就可以在页面中正常使用了。比如，
- div.title {
- font-family: 'icomoon'
- }
如果不出任何的意外的话，你将会得到自定义的字体效果。
自定义字体
说到这里，如果大家自己动手实验一番的话，就会发现一个致命问题：我去哪里获得这些自定义字体啊？
目前有三种途径来获取这些字体，
- 去免费的网站下载字体
- 去收费的网站购买字体使用授权
- 有设计背景，自己设计字体
针对前两种方式没什么好说的，针对第三种方案，可能相关门槛就高了一点，需要一些设计背景。如果有兴趣，可以参阅这篇文章。
webfont的更多内容
收集自https://www.w3cschool.cn/css_series/css_series-qx2k24qe.html