zoukankan      html  css  js  c++  java
  • 分享一组矢量图标–UX图标字体库

      以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219

      科技日新月异的今天,市面上各种分辨率、各种显示精度的显示设备层出不穷,在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求;如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示(new ipad)上展现就不尽人意了。那这么多的显示设备,那么多的图标尺寸设计师难道要一个一个去优化去设计吗?

      传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量,而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了;

      矢量技术在图标上的应用:

      现在可以承载矢量图形,同时又可以在app、web上使用的主要有svg和我们熟悉的字体文件;在这里我们主要介绍后者——图标字体;顾名思义图标字体是将图标以字体文件为载体在页面中展现,前端工程师可以通过控制字体的方式控制图标的大小颜色;

    ux_icon

    
    
    一定要添加iconfont: "打印机", asiicode: 120 ,不然在window xp下用safari会出现蓝屏。
    

      第一步:使用font-face声明字体

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

      第二步:定义使用iconfont的样式

    .iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}
    

      第三步:挑选相应图标并获取字体编码,应用于页面

    <i class="iconfont">&#33</i>
    

      打包下载:直接下载

  • 相关阅读:
    42. Trapping Rain Water
    223. Rectangle Area
    645. Set Mismatch
    541. Reverse String II
    675. Cut Off Trees for Golf Event
    安装 VsCode 插件安装以及配置
    向上取整 向下取整 四舍五入 产生100以内随机数
    JS 判断是否为数字 数字型特殊值
    移动端初始配置,兼容不同浏览器的渲染内核
    Flex移动布局中单行和双行布局的区别以及使用
  • 原文地址:https://www.cnblogs.com/huyong/p/5526738.html
Copyright © 2011-2022 走看看