字体图标的使用

shuibo 发布于2019-04-23 11:54 / 2103人阅读

摘要：字体图标的不足既然字体图标那么有效率，那么为什么不都使用字体图标呢现在的限制主要是字体图标的开发要求比较高，毕竟是开发一种字体。自己开发字体图标很累，幸好有很多乐于分享的，现在有很多网站把一些常用的图标都做成了字体图标分享了出来。

字体图标的介绍
iconfont的使用
- 基于unicode的用法：
- 补充

首发日期：2019-01-13

字体图标的介绍

-- 什么是字体图标?
在计算机上，文字本质上都是一些像素点，而图标也是一些像素点，那么有没有办法把某个字体的字做成图标的样子呢？于是有了字体图标这种东西。字体图标本质上是一种字体，不过它在表现意义上是一个图标。

-- 为什么使用字体图标？有什么好处？
如果你学过一些类似“精灵图”这样可以节省页面资源请求的东西的话，那你会很容易就明白字体图标的意义。这都是为了减少请求，提交页面的效率啊。
在很多时候，一个图片的字节数要远大于一个字的字节数，所以如果我们传输一个类似图标的字体的会比传输一个图标图片好节省传输资源。
另外一个好处是，转成字体后的图标就可以像字体一样操作了，可以很容易地更改图标的颜色和大小。

-- 字体图标的不足
既然字体图标那么有效率，那么为什么不都使用字体图标呢？现在的限制主要是字体图标的开发要求比较高，毕竟是开发一种“字体”。所以很多时候特别的图标（如公司logo）都使用有原始的图标文件，而通用的可以使用字体图标（搜索图标啊，编辑图标啊。）

自己开发字体图标很累，幸好有很多乐于分享的coder，现在有很多网站把一些常用的图标都做成了字体图标分享了出来。

比较知名的有
- iconmoon：https://icomoon.io/
- 阿里旗下的iconfont：iconfont官网

下面的例子使用阿里旗下的iconfont为例

iconfont的使用

1.首先，进入阿里旗下的iconfont官网iconfont官网搜索你想要的图标。

2.选择图标，把图标添加入库

3.然后在右上角的小车子那里把图标下载下来。

点击下载代码

4.下载的是一个压缩包，解压后得到：

5.demo_index.html有介绍如何使用iconfont，不过我这里也介绍一下（因为有些人觉得那个教程不太好理解，没有一步步来）。

基于unicode的用法：

1.首先，把iconfont.eot，iconfont.woff2，iconfont.woff，iconfont.ttf，iconfont.svg拷贝出来，放到与自建的测试用的页面demo.html位于同一个页面。

2.在测试页面中定义字体类型（这个可以从压缩文件自带的demo_index.html文件找到）：

    /* css语法：定义字体类型 */
    @font-face {
      font-family: "iconfont";
      src: url("iconfont.eot");
      src: url("iconfont.eot?#iefix") format("embedded-opentype"),
          url("iconfont.woff2") format("woff2"),
          url("iconfont.woff") format("woff"),
          url("iconfont.ttf") format("truetype"),
          url("iconfont.svg#iconfont") format("svg");
    }

3.在页面中定义字体样式（这个可以从压缩文件自带的demo_index.html文件找到）：

    /* 定义图标的样式，使用了样式，图标才能正常显示 */
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 28px;
      color:red;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

4.随便定义一个元素，如span，给元素加上上面定义的样式，然后元素里面的文本是一串unicode码，这个码可以从压缩文件自带的demo_index.html文件找到。

完整代码如下：

补充

由于上面是使用特殊的字体格式把unicode码变成一个“像图标的字体”，所以上面的图标是可以使用字体的所有特性的（字体颜色，字体大小等等）,这样可以很轻易地更改图标的颜色和大小。
上面定义字体类型时使用的url是一个路径，是当前文件与字体文件的相对路径，所以如果字体文件不与测试网页位于同级目录下，那么要更改。
@font-face这个语法我就不介绍了，这是CSS3的内容，不会的自己查一下吧，不想查的你就仅仅ctrl+c和ctrl+vdemo_index.html文件中的内容即可。
这里就介绍了基于unicode的用法，相信“入了门”后，你可以很轻易地从demo_index.html中学会后面的两种用法。（常用的还是基于unicode的用法和基于class的）。

云服务器 GPU云服务器字体图标图标字体图标字体库使用自定义字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1335.html

iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
字体图标(font-icon)，你还有什么理由不使用它？

摘要：自己制作字体图标的时候有需要注意这些阿里图标库的图标多，免费但是编辑器不如好用。建议设计师对于一些常用图标直接去阿里图标库找，下载文件即可。优点下面的简介来自，著名字体图标库Font Awesome的首页，http://fontawesome.io： Font Awesome gives you scalable vector icons that can instantly b...

felix0913 2019-08-29 11:19 评论0 收藏0
web字体

摘要：字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。推荐网站字库成立于年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。这个字体图标可以在下免费使用。1.字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。1、TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，...

番茄西红柿 2019-04-22 19:50 评论0 收藏1
CSS 小结笔记之图标字体（IconFont）

摘要：本篇主要介绍一种非常好用的图标大法图标字体。图标字体可以非常便捷的去解决以上问题，使用起来也非常简单。并且改变图标大小只需要改变字体大小就可以了。　　本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。　　什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。　　网站上经常会用到各种图标，之前网页上使用图...

番茄西红柿 2019-04-23 13:20 评论0 收藏0
自己制作微信小程序使用base64字体图标

摘要：问题微信小程序不能随意使用网络资源，如字体文件等不能在小程序中使用字体文件不能使用背景图片定位来使用内部图片下面就介绍一下如何制作字体图标。简易方式通过两个在线工具，很容易地生成加密的字体图标。问题： 1.微信小程序不能随意使用网络资源，如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍...

leon 2019-08-29 16:18 评论0 收藏0