无图片字体icon

W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其实挺多,但一直懒于写blog,也经常会出现一些知识点重复去查询,一些知识点难以及时分享与讨论。ADT团队在不断的成长与壮大中,于是鞭策自己尽量多的习惯去记录,也为了知识更好的分享与积累吧。

现在来看,应该大家都接触过css3的自定义字体(@font-face),也应该知道各个浏览器都支持(包括IE6),只是各自对字体文件的格式的支持不一样。

为什么要将icon做成字体?

  1. 字体文件小,一般在20K左右吧(icon图片各种尺寸大小以及各种图标多)
  2. 容易编辑和维护,可用css直接对字体控制大小和颜色(图片的话修改一个也许是修改好几个尺寸)
  3. 透明完全兼容IE6(图片透明度兼容不好)
  4. 移动端分辨率多,字体icon不会出现失真等问题(移动端分辨率多,各种尺寸多,或者大图压缩浪费资源。)

怎样才能将icon变成字体?

  1. 将设计稿中的icon(要有矢量路径,位图没法转化)完美还原成字体
  2. 用字体编辑软件,比如FontCreator、FontLab等
  3. PSD–>eps–>FontLab(这里用FontLab为例),也就是将PSD转换为illustrator的eps格式,然后再将某个字符复制到FontLab中。

实际举个例子吧

  • 打开设计稿psd,将内容保存为photoshop eps格式
  • 在illustrator中打开保存的eps文件,取消分组,然后点选icon,复制。
  • 打开FontLab,随便打开一款字体文件,这里用tahoma.ttf为例:
  • 双击或全选某个字符,删除原有的图形,粘贴刚复制的icon对象。生成字体文件就可以了。
  • 查看字体对应字符,在该字体上右键查看属性(快捷键Alt+Enter),查看该字体对应的字符:

可以看到字体对应的字符是odieresis,unicode编码是00F6。而实际字体图像已经变成“+”了。

字体格式的浏览器支持: 先使用font-face声明字体:

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

注:以上来自于:iconfont.cn以及webfonts.info 注:woff是最新的web开放字体格式(web open font format),w3c推荐,主要优势是针对浏览器进行优化,字体文件小。

然后,在icon元素上使用该字体就好了:

.iconfont {  font-family:"iconfont" !important;  font-size:16px;  font-style:normal;  -webkit-font-smoothing: antialiased;  -webkit-text-stroke-width: 0.2px;  -moz-osx-font-smoothing: grayscale;}.icon-liebiao:before { content: "\e600"; }

到此我们就基本能算大功告成了。 IE9以前只支持eot格式,所以需要将ttf转换为eot先。 可以使用微软官方的WEFT软件,也可以使用一些在线工具: http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式; http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式 另外,eot文件必须添加域名白名单才可以使用,推荐使用CreateMyEOT:

最后是字体文件跨域问题: 这个是在实际项目中出现的问题,找了几种方式。有些是要服务器上去配置,前端能解决的,目前我是用很强盗的形式, 把这个存在跨域问题的文件,转成base64编码,比如ttf文件,只需要找一下转成base64的就行。

例如我这个把文件往上面一拖,把这段编码copy到css文件就行。(注:此工具是同事as3long制作。特此感谢。)

总结: iconfont已经很强大了,轮子是否需要继续创造,就看团队了。 css3很强大,html5标准也终于完工,未来的路很长,人很累,所以先吃饱再说。

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-09-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王大锤

iOS各种调试技巧豪华套餐

4169
来自专栏杨俊标的专栏

【HTML插件】帮你100%还原设计

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPh...

2282
来自专栏黑泽君的专栏

打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定...

1833
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美。 ? 皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。,所以一共取...

4025
来自专栏小狼的世界

JavaScript Mobile开发框架汇总

目前Javascript移动开发框架有些共同的特点:专门为移动设备做了优化,提供标准的UI组件;提供跨平台的支持(Android、IOS、etc);轻量级,由于...

1413
来自专栏九彩拼盘的叨叨叨

javascript 组件

2073
来自专栏ytkah

微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

3848
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

96611
来自专栏企鹅号快讯

做网站-如何将设计稿还原为网页

做网站开发的伙伴应该很清楚,一个网站从设计到开发完成,经过的步骤,除了需求功能这些不说以外,其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页...

27610
来自专栏编程

网站代码该这样优化?

网站代码的优化也是网站优化中的一种优化措施,代码对于网站优化来说非常重要。虽然HTML代码是程序员应该精通的语言,但是对于HTML代码的优化应该是SEO专员应该...

1888

扫码关注云+社区

领取腾讯云代金券