Use icon fonts to assist CSS in image processing

这篇文章主要介绍了使用icon fonts来辅助CSS处理图片,在移动端网页的设计中使用较多,需要的朋友可以参考下

由于移动端设备拥有不同分辨率，PPI 等引起的问题， 常常需要针对不同屏幕分辨率来调整优化，如使用 @2x 图片， max-width 限制等。
采用 css @font-face 用来显示 icon 也不失为一种好办法。
因为 icon fonts (字体)是矢量图形，所以不受分辨率的影响，同时可以做到完美缩放；当然，也可使用在 WEB 端。
优点

    文件小
    加载性能好
    支持 css 样式
    IE6/7 下也支持

缺点

    样式限制，使用扁平化风格
    移动端还存在不兼容问题 

    少量移动设备和 icon fonts 字符编码冲突
    FF和 IE9 下跨域问题
    性能问题

使用方法

    制作字体文件
        可以利用字体工具手动制作
        也可以利用在线工具自动生成
    在 css 中引用，如下

引入字体文件

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

再定义一个 icon-* 通配我们所有图标的共有 CSS 样式，

[class^="icon-"], [class*=" icon-"] {   
  display: inline-block;   
  speak: none
  font-family: "iconfont";   
  font-size: 16px;   
  line-height: 1;   
  font-style: normal;   
  /** 字体图标出现锯齿的问题： */
  -webkit-font-smoothing: antialiased;   
  -moz-osx-font-smoothing: grayscale;   
}

最后是利用 :before 来注入每个 icon 对应的字体编码

.icon-bell:before {   
  content: "\003432";   
}   
.icon-search:before {   
  content: "\003433";   
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于css3的UI元素状态伪类选择器的分析

使用css如何让背景图片拉伸填充避免重复显示

The above is the detailed content of Use icon fonts to assist CSS in image processing. For more information, please follow other related articles on the PHP Chinese website!