HTML and CSS Reference
In-Depth Information
The font-embedding techniques in the previous section are the new kids
on the block and aren't free from implementation issues such as browser
support or font licensing, so these older and tested techniques are useful
to have in your arsenal.
As with text set directly into an <img> tag, these techniques can be
useful in small doses such as for article headings or navigation elements,
but replacing large blocks of type on the fly provides a good deal of over-
head or maintenance problems.
Image Replacement
Rather than use an image tag to display non-HTML-based text, with
image replacement, you can use that same image file as a CSS-based
background on a more conventional HTML element. After sizing and
positioning the background image, the foreground text must be hidden
from the user by shifting its position, changing its display value, or doing
some similar trick. In the following example ( Figure 9.3 on the next
page), headers are presented with the Bitstream Vera Sans font with
some embossed effects that cannot be accomplished with CSS- and
HTML-based type:
h2 {
display: block;
height: 25px;
background-image: url(images/sprite_imagereplace.png);
background-repeat: no-repeat;
text-indent: -9999px; /* shift HTML text out of view */
#hdrHome {
width: 80px;
background-position: 0 0;
(continues on next page)
Search WWH ::

Custom Search