应用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.     src: url('iconfont.eot'); /* IE9*/  
  3.     src: url('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.   display: inline-block;   
  3.   speak: none  
  4.   font-family: "iconfont";   
  5.   font-size: 16px;   
  6.   line-height: 1;   
  7.   font-style: normal;   
  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. }  
上一篇：IUNI手机上暗然换帅 国内手机上新产品牌2020年或 返回下一篇：没有了