[css3-fonts] font feature fallback examples

I put together a few samples of different types of font-specific
features in fallback situations:

  http://people.mozilla.org/~jdaggett/images/fallbackexamples.png

The first example shows of simulated cross-platform fallback.  Gabriola
is a Microsoft font that ships with Windows 7.  Poetica Std is an Adobe
font but pretend for now it's a Mac OSX platform font.

  h3, h4 {
    font-family: Gabriola, Poetica Std;
    font-variant: styleset(6);
  }

Gabriola displays a elongated descender for 'p' and 'g' and a flourish
on the 'h'.  Poetica shows swooping versions of 'A' and 'K'.

The second example shows different variations of annotated characters,
characters draw with a box or circle around them.  Meiryo is a Windows
font, Hiragino Maru Gothic ProN a Mac OSX font.

  .annotate {
    font-family: Hiragino Maru Gothic ProN, Meiryo;
    font-variant: annotation(1);
  }

If a user was using this to annotate numbers, the result would be
different between these two fonts.  If however, they were using it for
the characters big, medium, small (think beer sizes here), the results
would be consistent across platforms.

The third example shows a case of unusual discretionary ligatures. 
While this discussion has focused on the use of font-variant values that
use a numeric selector, some boolean values can enable unusual glyphs
depending on the font:

  h3, h4 {
    font-family: StrongPlatformFont, MEgalopolis Extra;
    font-variant: additional-ligatures;
  }

Depending upon the content of the heading, fallback could result in
unusual ligatures being used if MEgalopolis Extra was a platform font
available on some platforms.

Similarly, the fourth example shows the effect of discretionary
ligatures being enabled when cross-script fallback occurs.  The authors
intent may be to assure a certain type of unusual ligature in Latin text
but this will also enable unusual changes in Japanese text, in this case
the enabling of the ligature for "incorporated company":

  h3, h4 {
    font-family: Calibri, Hiragino Maru Gothic ProN;
    font-variant: additional-ligatures;
  }

Cheers,

John

MEgalopolis Extra
http://www.smeltery.net/fonts/megalopolis-extra

Received on Friday, 19 March 2010 06:45:20 UTC