Post

如何在HTML中使用图标字体?

文章目录

什么是字体图标?

在做手机端Web项目中,经常会遇到小图标在手机上显示比较模糊的问题,有很多小的Icon(图标),如分享、回复、赞、返回、话题、访问、箭头等,这些Icon(图标)一般都是纯色的。经过实践发现了一种比较好的解决方案,图标字体化。

使用图标字体的优势和劣势

字体图标除了图像清晰度之外,比位图还有哪些优势呢?
1、轻量性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。

2、灵活性:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。

3、兼容性:网页字体支持所有现代浏览器,包括IE低版本。

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

如何使用?

把字体目录下载到你的项目中,再引用它的css,以Font Awesome为例。
  1. 拷贝 Font Awesome 字体目录到你的项目中。
  2. font-awesome.min.css 文件到你的项目中。
  3. 打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。

     字体路径是相对于你的 CSS 目录的。

  4. 在html文档中的 <head> 部分,引入 font-awesome.min.css 文件。
    1. <span class="tag"><link</span> <span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"../css/bootstrap.min.css"</span><span class="tag">></span>
    2. <span class="tag"><link</span> <span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"../css/font-awesome.min.css"</span><span class="tag">></span>
  5. 在浏览器中打开页面,检查是否正确启用了 Font Awesome!

下面推荐两款字体图标:

 

Font Awesome, 为 Bootstrap 而创造的图标字体
http://www.bootcss.com/p/font-awesome/
Iconfont-阿里巴巴矢量图标库——满满的淘宝元素
http://www.iconfont.cn/

附件列表

 

Leave a Reply

  • 评论2则,共1页,当前第1
    • fugui.in

      我很省,字体文件那么大,我都舍不得用,怕占空间多哈哈

      • 跟windows字体库那些不一样的。专门给图标做的字体。几十到一百k而已。