Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iconfont实操
Search
三 桂
March 31, 2014
Technology
0
71
iconfont实操
从准备工作、制作流程、字体使用、应用案例、存在问题等全方位讲解iconfont在实际项目中的实践。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
150
SASS介绍
and1coder
1
220
SASS实战
and1coder
2
220
PMS新版预研与总结
and1coder
0
98
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
850
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
2
140
On Your Data を超えていく!
hirotomotaguchi
2
620
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
810
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
740
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
150
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
450
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
150
反実仮想機械学習とは何か
usaito
PRO
8
3k
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.7k
MapLibreとAmazon Location Service
dayjournal
1
140
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
67
8.6k
Agile that works and the tools we love
rasmusluckow
324
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Invisible Side of Design
smashingmag
294
49k
A Philosophy of Restraint
colly
196
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Building an army of robots
kneath
300
41k
Statistics for Hackers
jakevdp
789
220k
Producing Creativity
orderedlist
PRO
336
39k
What's in a price? How to price your products and services
michaelherold
237
11k
Building Applications with DynamoDB
mza
88
5.6k
Transcript
iconfont实操 Samgui @ 2013.11.08 操
目录 准备工作 制作流程 字体使用 应用案例
存在问题 总结
准备工作 沟通 工具
沟通 提前跟产品侧及设计侧进行沟通,表明这么做的好处以及存在的问题, 确定这件事值得做! 新淘宝首页设计创新点 http://samgui.com/slides/taobao_new_homepage.html
工具 制作过程涉及以下工具: Photoshop Illustrator Fontcreator Fontsquirrel
Fontsquirrel http://www.fontsquirrel.com/tools/webfont-generator
制作流程 是否开源字体 是否有4种格式 设计是否矢量图? 转换成矢量图 复制图层粘贴到AI 复制形状粘贴到 Fontcreator 调整baseline等 导出.ttf格式
生成其他格式 Fontsquirrel 写一大坨CSS DONE!
Photoshop 在Photoshop图层面版直接拷贝图标图层,可以是以下格式: 形状 矢量智能对象 直接拷贝图层 双击进入Illustrator
Illustrator Photoshop形状 将在Photoshop中复制的形状粘贴到Illustrator,并填充任意颜色,然后 复制到Fontcreator字体单元。
Illustrator Photoshop矢量智能对象 将在Photoshop中复制的矢量智能对象粘贴到Illustrator,第一步先进行 扩展(菜单栏》对象》扩展),然后再按Shift+Ctrl+F9调出”路径查找 器”合并形状,最后复制形状到Fontcreator字体单元。
Fontcreator 将在Illustrator中复制的形状粘贴到Fontcreator字体单元中,然后双击字 体进入字体编辑界面,调整好细节之后导出为.ttf文件。 上边界 下边界 基线 字符左右间距
Fontsquirrel 将在Fontcreator中导出的.ttf文件上传到Fontsquirrel并导出其他几种字 体格式文件,至此字体制作完成。
字体使用 设置@font-face 使用方法
设置@font-face @font-face { font-family: iconfont; src: url(' iconfont.eot'); /* IE9*/
src: url(' iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url(' iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */ url(' iconfont.woff') format('woff'), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */ url(' iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ font-weight: normal; font-style: normal; } http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8 http://www.fluorcow.com/embedding-fonts-on-a-website
使用方法 .iconfont { font-family: iconfont; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:
grayscale; } <i class=''iconfont''></i> 注:View 》Display format 》Decimal 对应编码
应用案例 我要买 卖家数据中心 QQ网购 http://www.wanggou.com/search/category.shtml icon font大搜罗 http://www.qianduan.net/icon-font-large-collecting.html
存在问题 IE7、8下渲染存在锯齿; IE9字体闪烁,渲染有延迟; 用户自定义浏览器字体覆盖(无解); 字体跨域(配置静态服务器允许指定域名跨域请求);
字体文件过大(配置Web服务器Gzip压缩); 字体下载出错(通过Javascript重新声明自定义字体); 其他未知原因(浏览器自己的缺陷如IE7)。 网易字体异常帮助页 http://help.163.com/12/0815/15/88V6929T00753VB8.html
总结 沟通 看应用场景是否合适,提前跟产品以及设计沟通 工具 寻求更好的工具,尽量做到自动化 流程 尽量简化流程,减少制作和维护成本 容错 渲染失败的容错方案
THANKS!