应用icon fonts来輔助CSS解决照片

日期:2021-03-05 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

因为挪动端机器设备有着不一样辨别率,PPI 等引发的难题, 经常必须对于不一样显示屏辨别率来调剂提升,如应用 @2x 照片, max-width 限定等。
选用 css @font-face 用来显示信息 icon 也不失为1种好方法。
由于 icon fonts (字体样式)是矢量图型,因此不会受到辨别率的危害,另外能够保证完善放缩;自然,也可以使用在 WEB 端。
优势

    文档小
    载入特性好
    适用 css 款式
    IE6/7 下也适用

缺陷

    款式限定,应用扁平化设计风格
    挪动端还存在兼容问题难题 

    小量挪动机器设备和 icon fonts 标识符编号矛盾
    FF和 IE9 下跨域难题
    特性难题

应用方式

    制做字体样式文档
        能够运用字体样式专用工具手动式制做
        还可以运用线上专用工具全自动转化成
    在 css 中引入,以下

引进字体样式文档

CSS Code拷贝內容到剪贴板
  1. @font-face {font-family'iconfont';   
  2.     srcurl('iconfont.eot'); /* IE9*/  
  3.     srcurl('iconfont.eot?#iefix'format('embedded-opentype'), /* IE6-IE8 */  
  4.     url('iconfont.woff'format('woff'), /* chrome、firefox */  
  5.     url('iconfont.ttf'format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
  6.     url('iconfont.svg#uxiconfont'format('svg'); /* iOS 4.1- */  
  7. }  

再界定1个 icon-* 通配大家全部标志的共有 CSS 款式,

CSS Code拷贝內容到剪贴板
  1. [class^="icon-"], [class*=" icon-"] {   
  2.   displayinline-block;   
  3.   speaknone  
  4.   font-family"iconfont";   
  5.   font-size16px;   
  6.   line-height: 1;   
  7.   font-stylenormal;   
  8.   /** 字体样式标志出現锯齿的难题: */  
  9.   -webkit-font-smoothing: antialiased;   
  10.   -moz-osx-font-smoothing: grayscale;   
  11. }  

最终是运用 :before 来引入每一个 icon 对应的字体样式编号

CSS Code拷贝內容到剪贴板
  1. .icon-bell:before {   
  2.   content"\003432";   
  3. }   
  4. .icon-search:before {   
  5.   content"\003433";   
  6. }