0
2
4
6
8
Q3 2010 Q4 2010 Q1 2011
7.33
4.19
3.27
iPads sold in millions
Sources: http://www.apple.com/pr/library/2011/01/18results.htm
l
http://www.apple.com/pr/library/2010/10/18results.htm
l
http://www.apple.com/pr/library/2010/07/20results.html
function set (idx, isVisible) {
var story = stories.children[idx]
,
src;
if (story)
{
src = story.getAttribute("data-img");
story.style.backgroundImage = isVisible ?
"url(" + src + ")" : "";
}
}
use the simplest JavaScript possible
@font-face
{
font-family: "Gotham Medium"
;
font-weight: normal
;
font-style: normal
;
src: url(data:font/truetype;base64,DATA
)
format(truetype),
url(gothmed.svg#f) format(svg);
}
use a data URI, just one :(
Slide 21
Slide 21 text
most SVG data URIs
are too long
Slide 22
Slide 22 text
data:image/svg+xml;charset=utf-8
,
SVG as a data URI
Slide 23
Slide 23 text
fi
le sizes as data URIs
127K
30K
/[!-~]/
character subset
Slide 24
Slide 24 text
character subset
/[!-~]/
only one works
Slide 25
Slide 25 text
li {
font-face: "Gotham Medium";
/* harmful for SVG! */
text-overflow:ellipsis;
}
Slide 26
Slide 26 text
li {
font-face: "Gotham Medium";
/* harmful for SVG! */
text-overflow:ellipsis;
}
Fred Flintst... Barney Rub... George Jets... Yogi Bear
this is what you expect
Slide 27
Slide 27 text
li {
font-face: "Gotham Medium";
/* harmful for SVG! */
text-overflow:ellipsis;
}
... ... ... Yogi Bear
this is what you get
Slide 28
Slide 28 text
Think twice really-really-long
before using @font-face