CSS3 Fonts and Text Tutorial

CSS3 introduces new features designers can use to style the text elements on a webpage. These features allow the use of unique and specialized fonts and special styles applicable to just the text elements on page. In this tutorial we will look at some of the most widely implemented features you can use right away in your designs.

 
The @font-face Rule

Other than a common set of “web-safe” fonts, browsers don’t have a common standard for specialized fonts. This is the reason you typically have to list web-safe fonts in your font-family property along with the specialized font you may want to use. With the @font-face rule you can use a specialized and eve unique font. The font will render exactly the same in all browsers that implement the CSS3 @font-face rule. The rule works by allowing you to link to a specific font file and applying that font to your text elements.

Let us look at an example.

The first thing you will need to do is get a specialized font file. In this example we will use a font file called ornamental.ttf. There are two types of broadly supported font files .ttf or the true type font and .eot or the embedded OpenType. All the latest versions of the browsers except for Internet Explorer, supports both file types. Internet Explorer does not support the .ttf file.

The font file to be used is linked to the style sheet using the @font-face rule. This new font is then given a name using the font-family property. In this example, we will name the special font oldFont. The src descriptor is used to list the location of the font file. In this example the font-file is located in the same folder as our html page.

@font-face
{
font-family:
oldFont;
src:
url(ornamental.ttf);
}

The @font-face rule allows you to use a font-file on the web using the url for its location.

@font-face {
font-family:
oldFont;
src:
url(http://example.com/fonts/ornamental.ttf);
}

Once you have create the link to a specific font file, you can apply that font to the text in your web page using the font-family name you created.

p
{
font-family:oldFont;
font-size:110%;
}

Let us look at a specific example. We will apply the fancy font to the first line of the sonnet from the earlier example. We will then give a different font size to first word to create a special effect.

Here is the html.

<div
id=”firstLine”>
<p><span
id=”fancy”>Let</span> <span id=”smfancy”>me not to the marriage of true minds</span></p>
</div>

Here is the style section.

#fancy
{
font-family:oldFont;
font-size:850%;
}
#smfancy
{
font-family:oldFont;
font-size:200%;
}

Here is what it will look like in the browser.

Text-Shadow

The new text-shadow property allows you to add a shadow to any text. It works more or less like the box-shadow property. However the text-shadow has only four values – h-shadow, v-shadow, blur and color.

p {
background:white;
color:white;
text-shadow:2px
2px 4px black;
}

Here is what it looks like in the browser.

You can add more than one shadow to a text by separating them with commas.

p {
background:white;
color:white;
text-shadow:2px
2px 4px black, 4px 4px 5px red;
}

Here is what it looks like the browser.

Word-wrap

The next text property we will look at is the word-wrap property. This property instructs the browser how to handle words that extend outside an element’s boundary. If the word-wrap is set to normal or the property is not used, the words will extend outside the element box. If the word-warp property is set to its only other value break-word, the browser will break the word to fit it into the element box.

Let us look at an example:

p
{
width:70px;
border:1px
solid black;
color:red;
font-size:130%;
}