Search Quirksmode
Search Quirksmode
This is the first post of hopefully many that describes the technology I have used on this website. It will provide a great reference for me to come back to and also introduce to others some great tools and resources.
When I first heard about sIFR I had to double take because it almost seemed too good to be true. One of htmls many limitations was the inability to use a bespoke font that differed from those supported by the operating systems and therefore run the risk of it not displaying properly on a users screen. To quote sIFR’s website:
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.
It basically allows you to use which ever font you desire, even if it doesn’t exist on the users operating system. You can choose which elements you wish to apply the transformation to e.g. h1, h2, p.aClassName and even style them exactly how you want. For Quirksmode I have applied sIFR to the h1′s using a font called Corbel, you can test the difference by disabling javascript or the stylesheet.
If you want to show off your fancy new fonts and don’t want to run the risk of a user not having flash or javascript enabled, then the other solution I have come across would be to use an image and hide the html text by positioning it off screen. The following css will do just that:
h1.logo{
background:url(https://cms.quirksmode.co.uk/wp-content/uploads/2008/03/mainlogo.jpg) no-repeat;
width:284px;
height:65px;
text-indent:-9999px;
outline:none;
}