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
250
PMS新版预研与总结
and1coder
0
120
Web前端开发规范
and1coder
7
310
Other Decks in Technology
See All in Technology
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
320
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
260
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
840
Practical Agentic AI in Software Engineering
uzyn
0
110
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
470
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
210
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
170
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
RailsConf 2023
tenderlove
30
1.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Why Our Code Smells
bkeepers
PRO
339
57k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Producing Creativity
orderedlist
PRO
347
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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!