HTML and CSS Reference
In-Depth Information
Font Replacement with Images
Since font embedding technology is still emerging, one way to guarantee the preservation of
a desired font across systems and browsers is to use CSS to replace text with images. While
this is impractical for large amounts of text, it is well suited to important design elements
such as headers and navigation.
This simple example shows the idea in practice:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Font Image Replacement Example</title>
<style type="text/css">
h1.replace {background: #fff url(hello.gif) no-repeat; width: 88px;
height: 24px;}
h1.replace span {display: none;}
</style>
</head>
<body>
<h1 class="replace"><span>
Hello
</span></h1>
</body>
</html>
O
NLINE
http://htmlref.com/AppB/imagereplacement.html
While the technique relies on using an image to replace text, it does have the advantage
of degrading gracefully when CSS is not being used by the end user, as shown here:
CSS ON
CSS OFF
Some vendors have tried to automate the production of image replacement fonts using
server-side programs, but so far such an approach is not commonplace and is generally
performed by hand and only on select text items like headings.
