CSS Drop Caps, the @font-face tag, sIFR and Cufon
This week we have been in interesting discussions regarding font rendering in html pages. The first discussions were centered around the accelerating trend for web pages to emulate magazine design. This started in 2004 with the limited use of CSS "Drop Caps" as shown in this paragraph (the large Blue letter "T" ). The code (example below) can be inline or, if used frequently, in the external style sheet.
<span style="line-height: 0.8em; padding-right: 5px; font-family: times,Georgia; float: left; color: #9dacbf; font-size: 600%; padding-top: 2px">T</span>his week we have been in interesting discussions regarding font rendering in html pages.
This led to the discussion of font replacement techniques. One method that is NOT recommended is the "@font-tag". Using @font-tag one uploads the .ttf or .otf files to the web server and then references them like this:
@font-face {
font-family: "powerweld.ttf";
src: url("powerweld.ttf") format("truetype");
}
h1 {
font-family: "powerweld";
}
Unless you have developed the font yourself (or it is open source) the @font-face tag constitutes the illegal distribution of the font software since directly posting the .ttf or .otf files on your web server will violate your license agreement for commercial fonts. Furthermore, Chris Wilson of Microsoft expressed that Microsoft (and, by proxy, Internet Explorer) should not support Font Linking in it’s current form. Microsoft does have its own EOT format, which it has proposed to the W3C for standardization, and would solve these issues.
Another method is known as sIFR and uses Flash to display the replaced font. sIFR3 is an interesting solution but is VERY tricky to set up and, until recently, required the developer to use Flash Pro. There are now two open-source generators for sIFR3, one by CoffeeCup software that only generates r419-compatible movies and Richard Odekerken's "sifrgenerator" which lets you upload a TTF file which is then turned into a sIFR that supports r436. However, in uploading the ttf you are giving them the font design with license for them to redistribute.
In order to display this font:
Requires this much code!!
<link rel="stylesheet" href="sifr.css" type="text/css">
<style type="text/css" media="screen">
/**********
These styles should be at the bottom of `sifr.css`. Make sure that they're only applied for the screen media type!
**********/
.sIFR-active h4,
.sIFR-active h1 {
padding-bottom: 0;
}
.sIFR-active h2 {
font-size: 55px;
display: block;
}
.sIFR-active h3 {
font-size: 18px;
}
.sIFR-active h4 {
font-size: 21px;
font-weight: normal;
}
.sIFR-active h5 {
font-size: 24px;
}
</style>
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-debug.js" type="text/javascript"></script>
<script type="text/javascript">
/**********
The sIFR configuration should typically go in `sifr-config.js`, but in order to keep the config file clean, and to give a quick overview, it's done here instead.
**********/
var powerweld = {
src: 'powerweld.swf'
,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16]
};
// sIFR.useStyleCheck = true;
sIFR.activate(powerweld);
sIFR.replace(powerweld, {
selector: 'h1'
,css: [
'.sIFR-root { text-align: center; font-weight: bold; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #CCCCCC; }'
]
});
sIFR.replace(powerweld, {
selector: 'h5'
,css: 'em { font-style: normal; color: #660000; }'
,selectable: false
});
sIFR.replace(powerweld, {
selector: 'h3'
,css: {
'.sIFR-root': { 'background-color': '#DCDCDC' }
}
});
sIFR.replace(powerweld, {selector: 'h2,h3'});
sIFR.replace(powerweld, {
selector: 'h4'
,css: {
'.sIFR-root': { 'color': '#660000', 'letter-spacing': -1.5 }
}
,filters: {
DropShadow: {
knockout: true
,distance: 1
,color: '#330000'
,strength: 2
}
}
});
</script>
Clearly, sIFR is not for the casual coder.
My preference is the new Cufon. Fast text replacement with canvas and VML - no Flash or images required.
Powerweld.font
And only requires this code:
<script src="cufon.js" type="text/javascript"></script>
<script src="powerweld_400.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h6', {
textShadow: '#333 1px 1px, #fff -1px -1px'
});
</script>
Comments