icon font浅谈-阿里云开发者社区

Icon Font浅谈2017-11-191190版权版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。简介：这周继续在弄hybird app 的 UI框架的重构，进行到了编写换肤功能的阶段，而在做换肤之前，我想应该先弄一套框架内置的图标。 而图标无非就是两种做法： 1.图片 使用图片很正常，但是有缺陷的。 1.众多的图标导致了增加了许多HTTP请求   PS:有人会说我把它们弄成一张大图不久行了，可是这样弄了之后，你连大小都无法改变。所以肯定还是一批小图片。 2.放大缩小失真 3.同张图片如果需要不同颜色，又得弄多一套出来。 2.字体 也就是这篇要说得Icon Font。做法就是讲你的图标做成字符，然后用css3中的@font-face去使用它。 PS:不说怎么去做字体，因为这对于缺少美工功底的我来说，做起来太吃力了。 优点： 1.不失真 2.可做到0 HTTP请求 3.可随意更换颜色大小（因为它是字体嘛），甚至是渐变 缺点： 1.即使使用一个图标也要用整个字体css（我觉得无伤大雅） 找另一条路弄Icon Font 在寻找资源中，有个网站不错——IcoMoon，https://icomoon.io/#home 1. 这个网站提供20+套,合计上千个不同风格的icon font(有免费,有收费的,但是基本上使用免费的就够用了) 2. 这个网站有一个在线工具,你可以使用这个工具来编辑它提供的icon font,并且选择自己喜欢的打包下载 就说下它的使用步骤 1.点击 PS:默认会有free的Icon在下面了 2.增加一些icon库进来 然后选择你喜欢的图标，再点击Generate Font，就可以到下载页面。 3.下载配置 之所以选择那一项，是为了生成的Icon字体文件直接以base64编码放在css文件里面 4.结果 刚刚所说的css文件就是style，我们看下里面有什么内容（被我删减了些东西） @font-face {font-family: 'icomoon';src: url(data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXXXXXXXXXXXXXXX) format('truetype');font-weight: normal;font-style: normal;} PS:后面的"XXXXXXX"太长了，就不在这里显示。 这个就是对字体的定义，src的引用也变成了base64编码的字符串。 [class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-checkmark:before {content: "e600";} 这个定义字体样式，值得注意的是后面一段css，之所以用:before伪类来声明，其实也是为了使用时可以不用写一个空标签"&#33"，用法如下。 <span 就能够愉快的使用Icon Font 总结： 对于mobile web应用来说，Icon Font去实现一套应用或框架默认图标是个不错选择，而不失真是这种方式鼓舞人使用的利器。当然如果是复杂的图标（色彩多样...）就不能用了，只能用回图片。 番外： 一些工具 文件与base64字符串进行转换工具： http://www.motobit.com/util/base64-decoder-encoder.asp 查看、编辑字体： TypeTool 3或FontCreator   本文转自 海角在眼前 博客园博客，原文链接： http://www.cnblogs.com/lovesong/p/4115991.html  ，如需转载请自行联系原作者

icon font浅谈 - 海角在眼前 - 博客园

这周继续在弄hybird app 的 UI框架的重构，进行到了编写换肤功能的阶段，而在做换肤之前，我想应该先弄一套框架内置的图标。 而图标无非就是两种做法： 1.图片 使用图片很正常，但是有缺陷的。 1.众多的图标导致了增加了许多HTTP请求   PS:有人会说我把它们弄成一张大图不久行了，可是这样弄了之后，你连大小都无法改变。所以肯定还是一批小图片。 2.放大缩小失真 3.同张图片如果需要不同颜色，又得弄多一套出来。 2.字体 也就是这篇要说得Icon Font。做法就是讲你的图标做成字符，然后用css3中的@font-face去使用它。 PS:不说怎么去做字体，因为这对于缺少美工功底的我来说，做起来太吃力了。 优点： 1.不失真 2.可做到0 HTTP请求 3.可随意更换颜色大小（因为它是字体嘛），甚至是渐变 缺点： 1.即使使用一个图标也要用整个字体css（我觉得无伤大雅） 找另一条路弄Icon Font 在寻找资源中，有个网站不错——IcoMoon，https://icomoon.io/#home 1. 这个网站提供20+套,合计上千个不同风格的icon font(有免费,有收费的,但是基本上使用免费的就够用了) 2. 这个网站有一个在线工具,你可以使用这个工具来编辑它提供的icon font,并且选择自己喜欢的打包下载 就说下它的使用步骤 1.点击PS:默认会有free的Icon在下面了 2.增加一些icon库进来然后选择你喜欢的图标，再点击Generate Font，就可以到下载页面。 3.下载配置之所以选择那一项，是为了生成的Icon字体文件直接以base64编码放在css文件里面 4.结果刚刚所说的css文件就是style，我们看下里面有什么内容（被我删减了些东西）@font-face {font-family: 'icomoon';src: url(data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXXXXXXXXXXXXXXX) format('truetype');font-weight: normal;font-style: normal; }PS:后面的"XXXXXXX"太长了，就不在这里显示。 这个就是对字体的定义，src的引用也变成了base64编码的字符串。[class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-checkmark:before {content: "e600"; }这个定义字体样式，值得注意的是后面一段css，之所以用:before伪类来声明，其实也是为了使用时可以不用写一个空标签"&#33"，用法如下。<span 就能够愉快的使用Icon Font 总结： 对于mobile web应用来说，Icon Font去实现一套应用或框架默认图标是个不错选择，而不失真是这种方式鼓舞人使用的利器。当然如果是复杂的图标（色彩多样...）就不能用了，只能用回图片。 番外： 一些工具 文件与base64字符串进行转换工具： http://www.motobit.com/util/base64-decoder-encoder.asp 查看、编辑字体： TypeTool 3或FontCreator  

javascript - 【fes】基于canvas的前端动画/游戏入门（番外一） - frontend magic - segmentfault 思否

先从老朋友 CSS 讲起我们熟悉的 CSS 风格颜色表示方式，大体有下面几种，canvas 大体是直接沿用这些写法的，但最后包含透明度的写法有些许不同。#RRGGBB：十六进制格式，红绿蓝分别用两位十六进制数表示。#RGB：简写的十六进制格式，转换成 6 位格式时会重复三原色，例如#fb0->#ffbb00。rgb(R,G,B)：函数表达式，三原色分别由 0~255 的整数值表示。rgba(R,G,B,A)：包含透明度的函数表达式，其中 alpha 参数为 0~1，需要指定透明度的颜色必须使用该格式。作为前端人员平时用得很多，但你可能会一脸懵逼之前自己写的颜色字符串居然是十六进制？ 待我细细道来。这里的 R 即是红色（red），G 即是绿色（green），B 即是蓝色（blue），这三个是显示器普遍使用的三基色，属于叠加型原色，百科摘录如下。【科普】原色是指不能透过其他颜色的混合调配而得出的“基本色”。 以不同比例将原色混合，可以产生出其他的新颜色。以数学的向量空间来解释色彩系统，则原色在空间内可作为一组基底向量，并且能组合出一个“色彩空间”。由于人类肉眼有三种不同颜色的感光体，因此所见的色彩空间通常可以由三种基本色所表达，这三种颜色被称为“三原色”。一般来说叠加型的三原色是红色、绿色、蓝色（又称三基色，用于电视机、投影仪等显示设备）；而消减型的三原色是品红色、黄色、青色（用于书本、杂志等的印刷）。解密颜色值每一个颜色都是由三基色叠加合成，所以我们需要告诉计算机这各个基色的比例（浓度），将这个比例量化就是一个 0~255 的整数，也可说是 256 个级别，越大即表示各种原色更多（更浓）。【PS】至于为什么是 256 个级别? 是因为计算机中每个原色用 8 位二进制（0 或 1）表示，也就是 2 的 8 次方共 256。每个颜色都是 256 个级别，那它的组合的可能就有256*256*256=16777216，换句话说，一个颜色用 24 位二进制表示，换算成十进制就是 0~16777215。 这里你应该可以看懂上面 CSS 颜色表示方式前三个的含义了吧，至于rgba(R,G,B,A)多加入了 A，表示透明度，这个是扩展版的 32 位颜色系统，多了一个额外的 8 位二进制表示透明度的级别，CSS 将它简化成 0~1 表示。举个例子吧！ 以#FF55F3这个颜色为例进行讲解。（0x 开头表示十六进制数，js 中不区分大小写，至于不知道什么是十六进制的，请自行百度） 红色是0xFF，绿色是0x55，蓝色0xF3。 转换成十进制：红色是 255，绿色是 85，蓝色是 243。也就是说这个数值和rgb(255,85,243)写法是等价的。【PS】简便的转换方法，直接在控制台打印即可，比如console.log(0xF3);，js 默认输出十进制表示的字符串。颜色合成颜色理论学得差不多了，现在来看看合成，已知三原色的值，要如何用代码合成一个颜色呢？以上面说的#FF55F3为例，现在已知的是各个颜色值，下面提供两种做法：得到rgb(R,G,B)格式直接利用 js 数字转换为字符串时默认是十进制的特性。let r = 0xFF; let g = 0x55; let b = 0xF3; let color = `rgb(${r},${g},${b})`;得到#RRGGBB格式一个 24 位的颜色值，二进制即：RRRRRRRRGGGGGGGGBBBBBBBB 红色值左移 16 位，绿色左移 8 位，将三者做“或”就能得到合成的 24 位颜色值，再转成 16 进制字符串即可。0xFF << 16 = 111111110000000000000000 0x55 << 08 = 000000000101010100000000 0xF3 = 000000000000000011110011 OR = 111111110101010111110011 //省略跟前面一样的... let color = `#${(r << 16 | g << 8 | b).toString(16)}`;颜色分解合成学完了，现在考虑一下如何用代码分解颜色，也就是把一个颜色分离出红、绿、蓝。rgb(R,G,B)格式就说了，切字符串就能得到。 重点讨论#RRGGBB格式，其实就是第二种合成方法的逆过程，右移后“与“操作，简单来说就是把想要的颜色值所在的位置移动到末尾，再用“与”0xFF剔除其他颜色。 还是以#FF55F3为例，现已知这个字符串，要求分解出三基色的值。切除“#”号得到 16 进制字符串；红色：右移 16 位，与 0xFF 做“与”操作；绿色：右移 8 位，与 0xFF 做“与”操作；蓝色：直接与 0xFF 做“与”操作。let color = parseInt('#FF55F3'.slice(1), 16); let r = color >> 16 & 0xFF let g = color >> 8 & 0xFF let b = color & 0xFF以绿色提取过程为例：0xFF55F3 = 111111110101010111110011 0xFF55F3 >> 8 = 000000001111111101010101 0xFF = 000000000000000011111111 AND = 000000000000000001010101 封装颜色工具当然，上面的合成、分解代码都是基本理论的应用，实际项目中使用会为了健壮性封装成更加合理的工具，可以参考我们工具类 utils.js 中的 colorToRGB() 和 parseColor() 两个函数。colorToRGB() 用于将#RRGGBB格式或任意数字，转换成rgb(R,G,B)或rgba(R,G,B,A)；parseColor() 用于将#RRGGBB格式转成数字，将数字转成#RRGGBB格式。javascripthtmlhtml5canvas赞5收藏3分享阅读 2.7k更新于 2020-12-03 calimanco1.4k 声望766 粉丝老朽对真理的追求从北爱尔兰到契丹无人不知无人不晓。关注作者« 上一篇【Fes】基于canvas的前端动画/游戏入门（二）下一篇 »【Fes】基于canvas的前端动画/游戏入门（番外二）