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
72
iconfont实操
从准备工作、制作流程、字体使用、应用案例、存在问题等全方位讲解iconfont在实际项目中的实践。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
150
SASS介绍
and1coder
1
230
SASS实战
and1coder
2
240
PMS新版预研与总结
and1coder
0
110
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
開発健全性の可視化と開発者体験の改善 ~ Compassでエンジニアに活力と生産性を ~
atlassianjapan
0
170
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
100
AWS SAW(AWS Support Automation Workflows)をもっと広めたい
kazzpapa3
2
170
Railway Oriented Programming を オニオンアーキテクチャに適用する by kotlin-result / Railway Oriented Programming in Onion Architecture by kotlin-result
yuitosato
2
190
強すぎるIAMをCloudTrailを使って適正化した話
yjszk
0
230
現実のRuby/Railsアップグレード
takeyuweb
3
2.8k
巨大企業でDX革新を起こすということ BTCONJP 2024
yamaken66
1
550
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
110
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
290
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
140
失敗しないOpenJDKの非互換調査
tabatad
0
200
Measuring the Success of Developer Experience
nikokivela
1
130
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Optimising Largest Contentful Paint
csswizardry
32
2.9k
Building an army of robots
kneath
302
42k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
A Tale of Four Properties
chriscoyier
156
23k
Designing for Performance
lara
604
68k
Thoughts on Productivity
jonyablonski
67
4.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
For a Future-Friendly Web
brad_frost
174
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Rails Girls Zürich Keynote
gr2m
93
13k
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!