Re: Downloadable fonts and image replacement

Also sprach Philip TAYLOR:

 > > 5. What would be your motivating factor for using a web font as
 > > opposed to creating an image or using a font that the user
 > > already has on their machine?
 > 
 > Images are irrelevant : text is text, images are images, and the
 > latter should never be used as a substitute for the former.

I don't agree with that. Consider this design from the zen garden:

  http://www.csszengarden.com/?cssfile=176/176.css

The page is beautiful, funny, and it mixes images and text. And, it's
pretty accessible. It could be improved by webfonts, though, if
webfonts become generally available. Webfonts could replace some of
the images on that page, but not all.

If you were the author of that page, how would you introduce webfonts?

Let's assume, for the moment, that the syntax from the proposed CSS3
Generated and Replaced Content Module is used:

  h1 {
    content: url(img/100x100.gif), contents;
  }

Now, if webfonts are introduced along with text-replacement there
might be a conflict. Consider this example:

  h1 {
    content: url(img/100x100.gif), contents;
    font-family: url(/fonts/goodfish.zip), serif;
  }

In the above example, the order of preference is clear; first the
image, then the webfont, and finally the generic "serif" font.
However, it is not possible to express this order of preference which
often makes more sense: webfont, image, generic font. One way to
address this issue is to put the order of preference on one property:

   h1 { 
     font-family: url(img/100x100.gif), url(fonts/goodfish.zip), serif;
   }

   In the proposal above, both the image and the webfont is specified
   on the 'font-family' property. It's not as bad as it first sounds;
   the image contains a visual representation of the font family, just
   like the font family is.

Here are two other proposals that achieve the same:

2) Use 'content'

   h1 { 
     content: url(fonts/goodfish.zip), url(img/100x100.gif), contents;
     font-family: serif; /* used only as backup */
   }

   Here, the font-family is only consulted if the webfont fails to load.


3) Use 'content' and 'font-family'

   h1 { 
     content: webfont, url(img/100x100.gif), contents;
     font-family: url(fonts/goodfish.zip), serif;
   }

   The new keyword 'webfont' indicates where, in the prioritized list
   of renditions, the webfont is. 

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Tuesday, 25 April 2006 20:05:37 UTC