zoukankan      html  css  js  c++  java
  • Font Icon 实践

    刚接触font icon,所了解得不深,仅仅作学习笔记。

    个人理解的font icon是以字体文件取代图片文件,来代替小图标。

    好处是能基本兼容所有的主流浏览器,不再为IE6不兼容半透明图片而烦恼。并且因为是字体,所以在移动开发当中拉伸和缩放中都不会影响icon的质量。

    凡事有弊有利,font icon因为是文字,所以暂时只能是单一地填充颜色,这种情况随着这种技术的应用越来越广泛或许会有改观。

    工具:

    把矢量图用AI或者psd导出svg或者eps,利用FontLab生成各种格式的字体文件。在此推荐线上字体制作平台:http://icomoon.io/

    前端应用:

    必须先用@font-face声明字体:

    @font-face {
    font-family: 'icomoon';
      src: url('fonts/icomoon.eot'); /* IE9*/
      src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('fonts/icomoon.woff') format('woff'), /* chrome、firefox */
      url('fonts/icomoon.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('fonts/icomoon.svg#svgFontName') format('svg'); /* iOS 4.1- */
      font-weight: normal;
      font-style: normal;
    }

    很多浏览器不会跟进文件的后缀名去自动识别字体格式,所以,format帮助浏览器识别字体格式,不能识别的时候加上#号后面是文件的备用名称。

    定义使用fonticon的样式:

    [class^="icon-"], [class*=" icon-"] {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
    
      -webkit-font-smoothing: antialiased;/*设置字体的抗锯齿或者说光滑度的属性*/
      -moz-osx-font-smoothing: grayscale;
    }

    利用CSS3伪元素插入对应的字符编码:

    1  .icon-icons:before {
    2 
    3   content: "e602";
    4 }

    最后应用到页面中:

    1 <div><span class="icon-icons"></span></div>

    但有时候需要在html直接插入,所以就需要把生成的字符编码转换成&#x。例如:e602 转换成 &#xe602; 即可使用:

    <div><span class="icon-">&#xe602;</span></div>

    可是,IE9以下版本并不兼容CSS3伪元素,所以并不能通过base64置于样式当中。所以,在此推介阿里的字体制作平台:http://www.iconfont.cn/,实现过程,在此略过。

    个人认为,如果不是移动开发,或者需要兼容低版本浏览器的开发过程中不推荐使用font icon这种技术,因为即使能在浏览器中能显示图像,但并不能展示font icon最强大的一面。

    【全都是流水账,仅仅记录进步的点滴】
  • 相关阅读:
    MongoDB入门教程二[MongoDB Shell 简介与使用]
    MongoDB入门教程一[文档与集合]
    MongoDB图形化管理工具Toad Mac Edition
    在Mac上安装MongoDB
    第一个iOS程序:Hello iOS
    Xcode集成开发环境的安装
    搭建 Android 集成开发环境
    Mac下如何安装JDK
    sdoi 2009 HH去散步 矩阵乘
    noip2010 引水入城 bfs+贪心
  • 原文地址:https://www.cnblogs.com/Travel/p/3460256.html
Copyright © 2011-2022 走看看