自定义图标字体文件

一、优势和劣势

字体图标除了图像清晰度之外，比位图还有哪些优势呢?

轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
兼容性：网页字体支持所有现代浏览器，包括IE低版本。

除了以上优势之外，当然也有劣势

图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。
使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

二、如何获取图标字体文件

去付费网站购买。（缺点很明显，不能个人化定制。比如，很多网站做的反爬技术就是利用将数据利用自己设计的乱序字体文件显示到页面上，这样达到的效果就是爬虫看到页面上的数据但是自己去获取 Dom 节点拿到的数据却是错误的。具体看我的这篇文章：Web 端反爬技术方案）
找设计师生成字体文件

步骤1: 设计师利用创建矢量图标的软件，制作好并导出格式为 SVG 的图标（比如 “Illustrator” 或者 “Inkscape” ，也可以利用 PhotoShop 的路径工具）

注意：一定是封闭的路径，不能是单边路径，否则生成的图标显示不出来。多个图层的话尽量合并
步骤2: 将所有到处的 SVG 文件放到一个文件夹中并命名（最好符合工程模块的命名规范）
步骤3: 打开制作图标的网站，将步骤2得到的 SVG 文件依次上传，然后也可以自定义图标对应的 unicode 码
步骤4：全部制作完成后点击页面右下角的 “Generate Font” 下载字体文件包

三、如何使用

将字符直接写入 DOM 节点的位置上

<style>
.iconfont{
	font-family: 'AwesomeFont';
}
</style>
<span cass=”iconfont”>&#x0021;</span>

使用 CSS 生成内容

<a href=”javascript:;” class=”iconfont praise”>赞</a>

.iconfont {
   font-family:'AwesomeFont';
}
.praise:before {
   content: “f00a”; 
}

使用 data-icon 属性

<style>
[data-icon]:before {
    font-family:'AwesomeFont';
    content: attr(data-icon);
    speak:none;
}
</style>
<span aria-hidden=”true” data-icon=”!”></span>赞</a>

四、常见问题

跨域问题

Apache

<FilesMatch “.(eot|ttf|otf|woff)”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>

Nginx

location ~* .(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

放在同一个域下
使用base64置入CSS中(Icomoon在导出图标时，设置里勾选Encode & Embed Font in CSS选项)。

字体图标出现锯齿

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

参考资料：

PS导出SVG

3.7 KiB Raw Blame History Unescape Escape

自定义图标字体文件

一、优势和劣势

二、如何获取图标字体文件

三、如何使用

四、常见问题

3.7 KiB

Raw Blame History