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
79
iconfont实操
从准备工作、制作流程、字体使用、应用案例、存在问题等全方位讲解iconfont在实际项目中的实践。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
160
SASS介绍
and1coder
1
240
SASS实战
and1coder
2
250
PMS新版预研与总结
and1coder
0
120
Web前端开发规范
and1coder
7
310
Other Decks in Technology
See All in Technology
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
460
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
130
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
8
4.3k
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
310
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
170
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
430
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
150
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
0
340
How to achieve interoperable digital identity across Asian countries
fujie
0
150
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
10k
The Invisible Side of Design
smashingmag
302
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
4 Signs Your Business is Dying
shpigford
185
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Thoughts on Productivity
jonyablonski
70
4.9k
A designer walks into a library…
pauljervisheath
209
24k
YesSQL, Process and Tooling at Scale
rocio
173
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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!