浅谈 Web iconfont

一、什么是 iconfont

iconfont 并不是什么新技术,iconfont 只是字体,然而这些字体不只包含字母或者数字,而是会包含一些符号和图案,雨人博客右侧「关注我」中的图案就是使用了 iconfont:

浅谈 Web iconfont

二、iconfont 的优劣势

使用 iconfont 而不是位图的优点有如下几点:

  1. 可以将任何的 CSS 样式赋予 iconfont
  2. 因为是矢量图形,所以可以任意伸缩而不会损失质量(特别是在现在高清屏满天飞的情况下)
  3. 多个图标只需要一个或很少的 http 请求,而不像位图需要大量的 http 请求
  4. iconfont 可以很小,所以加载速度非常快

其实对于我来说使用 iconfont 更重要的原因就是 1 和 2。

iconfont 的劣势

  1. 如果需要展示一个复杂的图案,那么 iconfont 并不合适(iconfont 用于展示简单的图形)
  2. 通常 iconfont 的颜色是单一的(除非用一些 CSS 技巧)
  3. iconfont 是通过固定的网格设计的,比如 16*16、32*32、48*48,如果改变了网格的大小,比如将网格大小改变为 40*40,可能会不清晰,无法保证 iconfont 的质量

三、如何使用?

1.挑选图标

自己设计并使用 iconfont 是可行的,但是使用一些已经设计好的无版权 iconfont 更为方便,这里推荐两个网站:http://iconfont.cn/http://fontawesome.io/,他们都提供了大量的 iconfont 供搜索并自行组合下载。

比如以 facebook logo 和 iconfont.cn 为例在网页中添加一个 facebook logo 的 iconfont,只需要在 http://iconfont.cn/ 中搜索 facebook,选择自己心仪的 icon 并加入到库中:

浅谈 Web iconfont

点击下载就会将库中所有的 icon 打包为 font 格式并下载:

浅谈 Web iconfont

可以用 Glyphs mini 之类的 font manager 查看~

(Glyphs mini 可以在 AppStore 中购买,售价为¥287,但它提供了 30 天的试用,使用了几天感觉非常的棒!有需要的土豪可以去购买~)

浅谈 Web iconfont

可以看到其中包括了我们需要的 facebook logo~

注意:在这里要将我们需要的 icon 的 unicode 记下来,如此 facebook logo 的 unicode 为 E60C。

2.使用 CSS3 font-face 声明字体

Code   ViewPrint
  1. @font-face {
  2.     font-family: 'iconfont';
  3.     srcurl('iconfont.eot'); /* IE9*/
  4.     srcurl('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5.     url('iconfont.woff') format('woff'), /* chrome、firefox */
  6.     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  7.     url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  8. }

@font-face 是 CSS3 中新加入的一个非常实用的模块。

3.定义使用 iconfont 的样式

Code   ViewPrint
  1. .iconfont {
  2.   font-family:"iconfont" !important;
  3.   font-style:normal;
  4.   -webkit-font-smoothing: antialiased;
  5.   -webkit-text-stroke-width: 0.2px;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }
  8. .icon-facebook:before { content"\e60c"; }

在这里使用了一个非常优雅的 css :before 伪元素,content 中的 "\e60c" 是 icon 的 unicode。

4.挑选相应图标获取编码置于 html 中

Code   ViewPrint
  1. <span><i class="iconfont icon-facebook"></i></span>

至此,一个 iconfont 的代码就完成了,完整代码如下:

浅谈 Web iconfont

运行后的效果:

浅谈 Web iconfont

5.为 iconfont 添加 CSS

你可能对它并不满意,因为他太小了,而且 facebook 的 logo 是深蓝色,但它是黑色...

没关系,之前提到了,我们可以为 iconfont 赋予任何的 CSS,也可以无限伸缩。

我们为 <i> 标签添加 CSS:

浅谈 Web iconfont

为 <i> 标签添加 css font-size、color 属性,得到的效果如下:

浅谈 Web iconfont

这样就在 html 中添加了一个 facebook logo 的 iconfont~

四、浏览器支持

  • IE:从 IE4 开始支持 eot 格式,IE9 开始支持 woff
  • webkit/safari:支持 TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+ 支持.ttf,iOS4.2 以下只支持SVG字体,Safari5.1+ 开始支持 woff 格式
  • Chrome:除 webkit 支持的以外,从 Chrome6 开始,开始支持 woff 格式
  • Firefox:支持 .ttf 和 .otf,从 Firefox3.6 开始支持 woff 格式
  • Opera:支持 .ttf、.otf、.svg, Opera11 开始支持 woff
  • iPad、iPhone、Android3.0+ 支持 SVG fonts

五、Firefox 和 IE 对于 @font-face 的跨域问题

Firefox 和 IE 是不允许 @font-face 进行跨域请求的。

(同源要求同协议、同域名、同端口,否则就算作跨域)

可以通过为 http header 添加 Access-Control-Allow-Origin 来解决:

Nginx

Code   ViewPrint
  1. location ~* \.(ttf|ttc|otf|eot|woff|woff2)$ {
  2.     add_header Access-Control-Allow-Origin "*";
  3. }

Apache

Code   ViewPrint
  1. <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
  2.   <IfModule mod_headers.c>
  3.     Header set Access-Control-Allow-Origin "*"
  4.   </IfModule>
  5. </FilesMatch>

如果我的文章对您有帮助,请我喝杯咖啡吧~

支付宝转账打赏⬆️

微信钱包转账打赏⬆️

目前评论:14   其中:访客  10   博主  4

  1. 韩国时尚购物起义 0

    什么都想100%得到的人,最后什么也得不到,必然成为失败者。

  2. themebetter 3

    留个脚印,支持一下。

  3. zengda 0

    不错,不错,看看了!

  4. 米粒博客 3

    挺不错的 有空得试试

  5. 网上赚钱 1

    不错,支持一下

  6. SNlone 1

    博主多才多艺呀,不仅会写人生感悟,还懂电脑技术。

    • rainman rainman

      @SNlone T_T 人生感悟就是发发牢骚…电脑技术也只是皮毛…

  7. Unee Wang 2

    哦,明白了,是移到微信上自动蹦出来的

  8. Unee Wang 2

    你的图标浮动在文字上向喽,把文字遮住了。
    那个相册我暂时也不搞了,效果都不满意,又不是做前端,基础不行

    • rainman rainman

      @Unee Wang 你那个相册那么漂亮…还搞啥

      • Unee Wang 2

        @rainman 主要是不同的屏幕适配不行。算啦,目前也还好啦

  9. 陶笛100 1

    站长的文章归档是怎么做出来的,能不能只归档某个栏目

    • rainman rainman

      @陶笛100 可以的,刚看了下你的站也是 wp,用 wp_Query(),参数中填需要的分类或者文章标记就可以了。

评论加载中...

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: