ccs3中icon转换为字体的方法
小图标转换为字体有几大优点
- 文件小,一般50k以内
- 避免了加载多个icons,减少了加载次数,有利于页面优化。
- 兼容性很好,可以随便放大缩小,都能正常显示。
- 维护起来也很简单,只用找到这个字体文件(比如.ttf文件),修改里面的某个图标即可。
制作方法
首先,用ps或直接用矢量图软件制作单个icon,制作好后保存为ttf格式,如图:
faq.ttf
然后,打开字体编辑器,比如FontCreator,新建字体myfonts。
需要添加一个字体,可以右击——>插入,然后“导入图像”,即做好的矢量图片(位图效果不好)。
对图像做相应的调整,直到合适为止。然后保存为myfont.ttf即做好了ttf字体文件。
字体格式转换
为了兼容不同的浏览器,需要制作不同的字体格式。比如IE只支持eot格式,便可以用格式转换工具,将ttf转换成其他格式。比如ttf-->eot在线转换:
http://ttf2eot.sebastiankippe.com/
ccs3中icon转换为字体的方法的更多相关文章
- 将java中数组转换为ArrayList的方法实例(包括ArrayList转数组)
方法一:使用Arrays.asList()方法 1 2 String[] asset = {"equity", "stocks", "gold&q ...
- js中字符串转换为数字的方法
parseInt; parseFload; +; parseInt() 和 parseFloat() 函数会尝试逐个解析字符串中的字符,直到遇上一个无法被解析成数字的字符,然后返回该字符前所有数字字符 ...
- Android 中使用自定义字体的方法
1.Android系统默认支持三种字体,分别为:“sans”, “serif”, “monospace 2.在Android中可以引入其他字体 . <?xml version="1.0 ...
- js中字符串转换为数值的两种方法的区别
在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt() //将字符串转换为整型 parseFloat() //将字符串转换为浮点型 转换函数在 ...
- JAVA中3种将byte转换为String的方法
HttpClient 类库中GetMethod类的getResponseBody方法返回的是byte[]类型,要操作起来不方便,我想把它转化成String类型. 查了网上的资料,有说法认为用这种方法比 ...
- CSS3的自定义字体@font-face:将图片ICON转为字体
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
- JavaScript -- 时光流逝(三):js中的 String 对象的方法
JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...
- Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)
Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...
- XML序列化 判断是否是手机 字符操作普通帮助类 验证数据帮助类 IO帮助类 c# Lambda操作类封装 C# -- 使用反射(Reflect)获取dll文件中的类型并调用方法 C# -- 文件的压缩与解压(GZipStream)
XML序列化 #region 序列化 /// <summary> /// XML序列化 /// </summary> /// <param name="ob ...
随机推荐
- POI导出Excel的空值问题
情景: 页面上的表格导出Excel,表格没数据导出的空格也要参与运算,结果在Excel上出错了 看图, 行-A.A12是没有数据的,后台代码cell.setCellValue("" ...
- fcc的高级算法题
核心提示:本部分一个9道题,给定时间50小时.属于fcc前端学习的"高级编程脚本"题,对于初学者来说,确实算是"高级"了.如果只想着闭门造车,50小时确实也不过 ...
- Ctrl+Scroll改变所有Editor的缩放比例 (Code::Blocks)
Settings > Editor > Zooming resizes all editors
- 谈谈我对PhoneGap的看法——(摘自唐巧的技术博客)
源地址:http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and-phonegap/ 主题部分 我认为PhoneGap有以下3大 ...
- 正则表达式分组()、不捕获(?:)和断言(?<=)详解
分组 分组在正则中用()表示,根据小菜理解,分组的作用有两个: 1.将某些规律看成是一组,然后进行组级别的重复,可以得到意想不到的效果. 2.分组之后,可以通过后向引用简化表达式(\1 或者$1). ...
- .net 应用迁移到Mono 工具 (Moma)
Mono Migration Analyzer (Moma) 是一个用于开发者使用的MS .net下开发的应用程序迁移到Mono平台的不兼容性检测工具.工具通过分析.dll或者.exe程序集的代码是否 ...
- BloomFilter 与 Cuckoo Filter
BloomFilter 与 CuckooFilter Bloom Filter 原理 Bloom Filter是一种空间效率很高的随机数据结构,它的原理是,当一个元素被加入集合时,通过K个相互独立的H ...
- ImageTragick Exploit & Fix
ImageMagick是一款广泛流行的图像处理软件,有无数的网站(国内国外都有)使用它来进行图像处理,本周二,ImageMagick披露出了一个严重的0day漏洞,此漏洞允许攻击者通过上传恶意构造的图 ...
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...
- verilog阻塞与非阻塞的初步理解(一)
通过两个模块来区别两者.测试平台:Modelsim altera 6.5b 阻塞模块: module blocking(clk,a,b,c); :] a; input clk; :] b,c; :] ...