DevOpicons, Devicons icon 字体的严格优化版本

分享于 

2分钟阅读

GitHub

  繁體 雙語
Heavily-optimised version of the Devicons icon-font.
  • 源代码名称:DevOpicons
  • 源代码网址:http://www.github.com/file-icons/DevOpicons
  • DevOpicons源代码文档
  • DevOpicons源代码下载
  • Git URL:
    git://www.github.com/file-icons/DevOpicons.git
    Git Clone代码到本地:
    git clone http://www.github.com/file-icons/DevOpicons
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/file-icons/DevOpicons
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    DevOpicons: 优化 Devicons

    Jenkins, before and after he lost weight | 731 ⇒ 244 points

    这只是由 Vorillas创建的一个经过严格优化的版本的Devicons字体。 原始 icon 向量的所有信用向他和他的项目贡献者,我只是清除过多几何图形。

    的结果: 17 KBs了woff的大小。 当你考虑格式已经压缩的时候,那是相当惊人的减少。

    大小修正

    除了优化向量的几何,我还对它们进行了缩放,使它们适合它们包含的画布。 只有在最后的设计提前知道时,在 icon 字体中使用"呼吸空间"才有帮助。 如果与它的他 icon 字体混合使用不同的margin 大小,它会导致不同的大小和不同的unsavoury CSS调整。

    例如考虑以下事项:

    Comparison of metrics

    你以前可能已经处理过了。 在确定DOM中图标的计算宽度和高度时,这会导致检查器工具中的许多不诚实度量。 在实现像素完美设计时,这可能会变得有点头疼。

    修复很容易- 完全消除边缘。 将空间调整为开发人员,因为它们是处理设计外观的那些人。 不允许让图标填充画布会导致更诚实的度量:

    Comparison of metrics

    警告

    如果 icon的尺寸为横向形状,请避免将它的设置为矩形画布:

    Good and bad, not in that order

    否则,你会得到这样的结果:

    Bad and bad, in that order

    因为记住,emrem 单位被缩放到文本的高度( 高度)。 所以避免让那个纵横比超过 1.0 !

    ,漫步,漫步

    我真不知道什么时候停止打字。 无论如何,有足够的排版课程享受改进的尺寸。


    版本  ICO  icon  font  
    相关文章