[css3-fonts] Comments on @font-face: local(...)

Hello www-style,

Here are a few comments on the css3-fonts editors draft, http://dev.w3.org/csswg/css3-fonts/.

 From http://dev.w3.org/csswg/css3-fonts/#ltfont-face-namegt :
[[
The notation for a <font-face-name> is the unique font face name enclosed by "local(" and ")". The name can optionally be enclosed in quotes. This also allows for referencing faces that belong to larger families that cannot otherwise be referenced.
]]

What characters are allowed to occur between "local(" and ")"? Postscript font-face-names have some restrictions, and I'm sure CSS does too.

In a local(...) declaration, if it is to mean a font face name as opposed to a font family name, should UA:s be allowed to apply font-weight and font-style to the resolved local font face? If UA:s are allowed to synthesize bold/italic on local font faces that is bad, since it is not always possible due to platform differences and since the results may not be what the author intended - it will look visually different/worse than a proper bold/italic font face. In testing it seems that UA:s differ in what they synthesize as well, which is yet another pain for authors.

Operating on the assumption that local specifies the font face name, when specifying several @font-face blends with the same family name, eg:

@font-face {
     family-name: foo;
     src: local(Arial);
}
@font-face {
     family-name: foo;
     font-weight: bold;
     src: local(Arial Bold);
}

the UA should just trust the style sheet rules - there should be no queries to the platform to decide whether the fonts actually match the provided properties are needed, and it's even possible to provide a font with different properties, such as mirroring the range of font-weights or using a bold non-italic font face to mean italic.

We've created a couple of tests for this, mainly to see what current UA:s are doing. The tests can be found here:

   http://lists.w3.org/Archives/Public/www-archive/2009Aug/0042.html

These tests are not exhaustive, and could probably be improved. At this point they're just testing functionality, without any particular pass criteria. A minor drawback is that since we're testing local fonts the custom fonts will have to be installed on the system. The custom fonts make it much easier to see if UA:s are synthesizing and/or if another font is used. The tests show that there are differences between UA:s, and in some cases between platforms using the same UA.

In short, none of the tested implementations "back down" on bold and italic (that is, they don't remove bold and/or italic from bold/italic fonts) but synthesize/switch (unclear which without better tests, but it appears both methods are being used) normal to bold/italic (the exception being FF352win, that doesn't apply bold to fonts with normal weight though it does apply italic to fonts with normal style).

There are a couple of problem areas where it's really unclear what is to be expected. For example, what's the expected result of:

    @font-face { font-family: MyNormalWebfont; src: local(mnwf.ttf); }
    .localfont { font-family: MyNormalWebfont; }
...
    <p class="localfont">normal text. <b>bold text</b>.</p>

assuming localfont hasn't got a bold @font-face blend, what font should be used for the text in the b tag? the same font as if the <b> tag had been outside the <p> tag?

Taking that one step further, when you have fallback font-families that could support bold/italic, how should that affect the result?
Example:
     @font-face { font-family: MyLocalWebfont; src: local(mnlf.ttf); }
     @font-face { font-family: MyItalicLocalWebfont; src: local(milf.ttf); font-style: italic; }
     @font-face { font-family: MyBoldItalicLocalWebfont; src: local(mbilf.ttf); font-weight: bold; font-style: italic; }
     .localfont { font-family: MyBoldLocalWebfont, MyItalicLocalWebfont, MyBoldItalicLocalWebfont; }

Moreover, in the spec there's an example like this:

@font-face {
     font-family: Gentium;
     src: local(Gentium), url(/fonts/Gentium.ttf);
}

Now, if we wanted to use the (local) system Gentium font (which has italic and bold) we'd need to have explicit @-rules for these, which is a bit more work. This is sort of contrary to the idea of having local() mean a font face name. Should there be another way of saying "Please use a system font with this family-name if you have it"? A UA that didn't support @font-face would select the Gentium systemfont if the content said e.g <div style="font-family: Gentium">, ignoring all @font-face rules. If a UA that supported webfonts ran across the same testcase then the behaviour would be different.

Cheers
/Erik

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Friday, 14 August 2009 13:57:46 UTC