asset fonts
TRANSCRIPT
Asset Fonts(in 10 minutes)
What areAsset Fonts?
Why Resolution Independence?
Photo by miguel77http://flic.kr/p/a7H5jd
@2×
@?×
@4×@1× @2×@0.5×@0.25× @8×``````
Like Magic!
Photo by eva.pébarhttp://flic.kr/p/9hBrtv
Good for Grandma™
Why Asset Fonts?
✓assets.png assets.ttf
✓✓✓
✓ ✓ ✓
✓
×
How Do ICreate One?
How Do IUse It?
.icon:before { content: '\xe012'; font-family: 'Cleardings'; speak: none;}
.icon:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none;}
<a data-icon="" href="http://twitter.com/clearleft">@clearleft</a>
CSS
HTML
[data-icon]:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none;}
<a data-icon="" href="http://twitter.com/clearleft">@clearleft</a>
CSS
HTML
What About Ligature
Asset Fonts?
f fiif fll
-webkit-font-feature-settings: "liga";-moz-font-feature-settings: "liga=1";-moz-font-feature-settings: "liga";-ms-font-feature-settings: "liga" 1;-o-font-feature-settings: "liga";font-feature-settings: "liga";
climaliga.woff
19kb
Go forth andcreate resolution
independence!
Thanks For Listening
@joshjegithub.com/joshje/forecast
Fork It!