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
78
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
240
PMS新版预研与总结
and1coder
0
120
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.7k
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
340
A2Aのクライアントを自作する
rynsuke
1
170
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.1k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1k
解析の定理証明実践@Lean 4
dec9ue
0
170
エンジニア向け技術スタック情報
kauche
1
230
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
220
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
1
500
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
500
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
IIWレポートからみるID業界で話題のMCP
fujie
0
770
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Six Lessons from altMBA
skipperchong
28
3.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Become a Pro
speakerdeck
PRO
28
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Writing Fast Ruby
sferik
628
61k
Building an army of robots
kneath
306
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Done Done
chrislema
184
16k
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!