清澈的风

如何花式使用字体（四）

话说这个主题真是没完没了啊，靠着写字体撑起一片天……好了，主要是因为web技术发展的迅速，我们又可以用上多色字体了，多色字体顾名思义，区别于以往普通的单色icon，拥有更加生动丰富的色彩，同时又更方便控制，很是值得尝尝鲜的~

首先打开马云爸爸家的iconfont之多色字体库,wow，果然有钱最能促进高科技了

OK,那么其实使用起来也并不是很困难，如果你已经看过这个系列的第二篇:如何花式使用字体（二）的话，流程基本是差不多的

作为一个吃货，我们选一个食物的多色字体库

然后让我们唱起来：I have a pen,I have an apple……
把Apple加到购物车，点击页面右上角的购物车，下载代码

然后你会得到一个含有示例的文件夹
多色字体主要用了symbol引用这种全新的引用方式，所以我们找到demo_symbol.html文件，打开可以得到一个苹果的多色字体引用示例

具体使用symbol引用产生多色字体方法如下：

Step1: 引入js

在<head>里引入文件夹里的iconfont.js

1
2
3
<head>
<script src="iconfont.js"></script>
</head>

※注意路径

Step2: 引入通用CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <meta charset="utf-8"/>
    <title>多色字体吃瓜教程</title>
    <script src="iconfont.js"></script>
    <style type="text/css">
        .icon {
          width: 1em; height: 1em;/* 改变图标大小*/
          vertical-align: -0.15em;/* 垂直对齐方式*/
          fill: currentColor;/*图标颜色*/
          overflow: hidden;/*解决溢出部分*/
        }
    </style>
</head>

tips:

  • width,height单位不限于em,可以是px,rem等
  • vertical-align可以是middle,baseline或数值等
    默认图标和文字相邻时，图标比baseline还要低(0.15em)x行高x100%
  • 由于图标是用svg绘制，默认采用自带的配色，如需更改去iconfont.js里修改path的fill即可
  • path 和 stroke 溢出 viewBox 部分在 IE 下会显示，normalize.css 中也包含此句

Step3: 写入HTML

1
2
3
<svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-Apple"></use>
</svg>

※注意类名一致
※为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了aria-hidden=”true”，简言之，当你用一些读屏软件时，不会听到I have an apple icon这种怪东西

经过以上三步，一个引领时代潮流的多色图标

就会展现在你的页面上啦~快点去跟小伙伴们炫（zhuang）耀(thirteen)吧~~(≧▽≦)/~

fontcss