More Related Content Similar to Bringing Typography to the Web with sIFR 3 at <head> (20) More from Mark Wubben (7) Bringing Typography to the Web with sIFR 3 at <head>5. ~1997
IE 4 with proprietary
EOT
NS 4 with proprietary
TrueDoc from
Bitstream
6. CSS Web Fonts
Specified in CSS 2
Removed in CSS 2.1
Back in CSS 3, dormant
since 2002
8. Jason Teague
CSS 3 Web Fonts
Module
Safari 3.1
Supports Font Linking
Soon
Firefox 3.1, Opera 10
10. @font-face {
font-family: quot;GraublauWebquot;;
src: url(quot;/GraublauWeb-Regularquot;) format(quot;truetypequot;);
}
11. h1 {
font-family: quot;GraublauWebquot;;
}
48. <head>
<link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot;
type=quot;text/cssquot; media=quot;screenquot;>
<link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot;
type=quot;text/cssquot; media=quot;printquot;>
<script type=quot;text/javascriptquot; src=quot;sifr.jsquot;>
</script>
</head>
49. <head>
<link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot;
type=quot;text/cssquot; media=quot;screenquot;>
<link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot;
type=quot;text/cssquot; media=quot;printquot;>
<script type=quot;text/javascriptquot; src=quot;sifr.jsquot;>
</script>
</head>
50. <head>
<link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot;
type=quot;text/cssquot; media=quot;screenquot;>
<link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot;
type=quot;text/cssquot; media=quot;printquot;>
<script type=quot;text/javascriptquot; src=quot;sifr.jsquot;>
</script>
</head>
52. .sIFR-active h1 {
font-family: Verdana;
line-height: 1em;
visibility: hidden;
/* Forces sIFR text to work nicely with
floated image, at least in this scenario
*/
display: inline;
}
54. Site HTML? CSS JavaScript
55. var fgm = { src: 'franklin-gothic-medium.swf' };
sIFR.activate(fgm);
56. sIFR.replace(fgm, {
selector: 'h1',
css: '.sIFR-root { color: #000000; }
.head {
color: #0068A3;
}'
});
57. Site HTML? CSS JavaScript sIFR!
70. <head>
<link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot;
type=quot;text/cssquot; media=quot;screenquot;>
<link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot;
type=quot;text/cssquot; media=quot;printquot;>
<script type=quot;text/javascriptquot; src=quot;sifr.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;sifr-debug.jsquot;>
</script>
</head>
76. var rockwell = {
src: 'rockwell.swf',
ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25]
};
sIFR.replace(rockwell, {
selector: 'h2',
css: '.sIFR-root { color: #FFFFFF; }'
});
78. sIFR.replace(rockwell, {
selector: 'h2',
css: '.sIFR-root { color: #FFFFFF; }',
tuneHeight: 8,
tuneWidth: 1,
offsetTop: 4,
offsetLeft: 2
});
84. class Options {
public static function apply() {
sIFR.domains = ['*.example.com', 'example.com'];
}
}
85. var rockwell = { src: 'rockwell.swf' };
sIFR.domains = ['*.example.com', 'example.com'];
sIFR.activate(rockwell);
89. Many thanks to these
wonderful Flickr
photographers: Jeremy Keith
Ralph Aichinger antifluor
Zara J Stig Nygaard
Sharat Ganapati Rex Sorgatz
Eduardo Arcos Ed Schipul
Hashir Milhan Wolfgang Staudt
Andrew Becherer Jesus Solana
Jeff Kubina David Goehring
Germán Meyer
Lali Masriera