CSS3: Non-Standard Web Fonts

Believe it or not, but Non-Standard Web Fonts was first implemented in Internet Explorer 5. The @font-face rule is now a standard in CSS3. The syntax is as follows:

@font-face {
        font-family: Softpedia-Font;
        src: url('Andale Mono.ttf');
}

This will make the user’s browser access the given URL and download the given font to be employed inside that page. Currently, the CSS3 standard will support the OTF, TTF and EOT font types.

If a weighted or italic version of the font is needed, that form of the font-family must be included in the rule, as well as in a separate declaration, as follows:

@font-face {
        font-family: Softpedia-Font;
        src: url('Andale Mono.ttf');
        font-weight: bold;
}

Finally you need to address your font, like:

p.funky {
        font-family: Softpedia-Font;
}

CSS3: textshadow

Many exciting new functions and features are being thought up for CSS3. I will try and showcase the text shadow on this page, as they are implemented in either Firefox, Konqueror, Opera and Safari/Webkit. Support for Internet Explorer 9 is announced by Microsoft (I’m curious, though…).

Text shadow:
text-shadow: 1px 1px 1px #ff0000;

p.shadow {
        color:#000000;
        text-shadow: 1px 1px 1px #ff0000;
}

Only users of Webkit (from Safari 3+), Opera 9.5 or higher, Firefox 3.1(pre-Alpha) or higher, Konqueror or iCab should see a red drop-shadow behind this paragraph.

</code>

Is there no way to fool IE7/8/9? Of course there is:

p.shadow2{
        color:#000000;
        position: relative;
        display: inline-block;
        filter: Shadow(Color=#ff0000, Direction=125, Strength=1);
}

Only users of Internet Explorer 7/8/9 should see a red drop-shadow behind this paragraph.

</code>