阅读(4417) (0)

WebFont与页面ICON图标研究

2017-06-07 14:49:55 更新

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

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

本文将较为详细的介绍页面icon及webfont的方方面面。

页面icon

什么是页面icon

如下图所示,

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

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

传统icon的制作

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

从图中可以看出来,这个图片中有很多的小图标,这些小图标按照一定的顺序排列在一起。

上面这种方式就是我们所说的传统制作和使用icon的方法。

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

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


.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>字段是用来标识字体格式帮助浏览器识别。常见字体格式及format如下图,

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'
}

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

自定义字体

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

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

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

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

字体图标

使用现有的免费字体图标

有一个好用的html5应用。通过此应用你可以选择IcoMoon提供的免费或者购买收费图标,然后生成字体。如下图所示,

下载得到生成好的字体后,它会帮我们生成好css代码,如下,


@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-rah7ee');
    src:url('fonts/icomoon.eot?#iefix-rah7ee') format('embedded-opentype'),
        url('fonts/icomoon.woff?-rah7ee') format('woff'),
        url('fonts/icomoon.ttf?-rah7ee') format('truetype'),
        url('fonts/icomoon.svg?-rah7ee#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

ok,事已至此,我们已经得到了需要的字体、css代码。现在我们可以在html页面使用图标字体来制作页面小icon了。

这里我们有两种方式来使用图标字体,一种是html实体 + webfont,一种是css样式 + webfont

html实体+webfont

还记得文首提到的天猫首页中的小icon图标么?现在我再来看看它的源代码,


<li>
    <s class="menu-nav-icon fp-iconfont">&#x 3451;</s>
</li>
<li>
    <s class="menu-nav-icon fp-iconfont">&#x 3459;</s>
</li>
<li>
    <s class="menu-nav-icon fp-iconfont">&#x 346c;</s>
</li>


.fp-iconfont {
    font-family: tm-fp-font !important;
}

这里我们只截取了一部分html代码,并去除了多余的样式因素。

从上述的代码中,我们看到s标签中包括了一些十六进制字符(以&#x开始,我这里强制添加了一个空格,不然实体就被浏览器解析了),这些奇怪的字符的作用就是配合自定义font-family进行页面渲染,从而展现为一个个icon小图标。

回头看看我们之前从https://icomoon.io/app上下载自定义字体时,是不是也给每一个icon图标标识了一个html实体(e600、e601等等)?

css样式+webfont

我们除了使用html实体配合font之外,还可以使用css样式配合font。

https://icomoon.io/app上下载自定义图标字体时,会同时得到相关的css代码,如下,


.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

所以我们只要在需要图标的html代码中添加相应的css样式即可,比如,


.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

可见,这种方式不再需要在html代码中书写相应的html实体,因为我们给相关元素添加了伪元素,将html实体转移到了伪元素中。

这里额外提一点,为何天猫的html页面中使用的是html实体+font而不是css样式+font?这其实是考虑了低版本浏览器的兼容性。因为部分(低版本的)浏览器还不支持css伪元素,但是html实体一定是支持的。

对比

到现在为止,我们已经有了2种(严格来说,是3种)来制作和使用网页icon小图标,

  • 图片 + css sprite
  • webfont + html实体
  • webfont + css样式

三者的对比如下图,

总得来说,前者是操作图片,后两者操作icon小图标就跟操作字体是一样的。比如,我想缩放图标,直接修改font-size即可;我想修改颜色,直接修改color即可。除了这些简单的变化,还可以灵活的添加描边、阴影等。

不过webfont的图标色彩单一(最多也就只能做出渐变),而图片则色彩丰富。

webfont的更多内容

Font Awesome

Font Awesome中文站点)是一套为Bootstrap而创造的图标字体库及CSS框架,在业界享有盛誉。

FA包含了常规web开发所需要用到的几乎所有图标,并且免费授权使用,只需要下载即可。详情请参阅其官网。

中文WebFont

目前在国外,webfont已经非常流行,但是国内迟迟未能起步。这跟国内的环境有关系,

  • 中文字体库过于庞大,需要一定带宽支持
  • 国内低版本浏览器市场占有率不能忽视,但是低版本的浏览器不能良好的支持webfont

不过,目前国内已经有两家公司致力于webfont这一块的服务,

有翻墙资源的,可以参阅google推出的webfont云托管服务。有兴趣的同学请自行调研相关服务。

中文webfont压缩

字蛛(Font-Spider)是一款基于nodejs的开源的本地webfont压缩器。它的原理就是扫描页面文档,然后删除webfont中没有使用的字符,从而达到精简webfont体积的目的。有兴趣的同学可以参阅其官网。

参考列表

End. All rights reserved @gejiawen.