W3C home > Mailing lists > Public > www-style@w3.org > September 2010

Re: [css3-fonts] @font-face matching and font-style descriptor

From: John Daggett <jdaggett@mozilla.com>
Date: Mon, 13 Sep 2010 13:31:31 -0700 (PDT)
To: Sylvain Galineau <sylvaing@microsoft.com>
Cc: www-style@w3.org, www-font <www-font@w3.org>
Message-ID: <386819038.560254.1284409891483.JavaMail.root@cm-mail03.mozilla.org>

Sylvain Galineau wrote:

> @font-face
> {
> 	font-family: MyTestFont;
> 	src: local(Arial);
> 	font-style: italic;
> }
> #test {
> 	font-family: MyTestFont;
> 	font-style: italic;
> }  
> 
> ...does #test's content render in italics or not ?
> 
> Firefox and Opera say no. WebKit and IE9 say yes.
> So Firefox/Opera only use the font-style descriptor for
> font matching. IE9 and WebKit use it for both matching 
> and styling.

Actually, the spec is pretty clear I think:

(1) local(xxx) references a *single* face with a *fullname* 
    of "xxx" [Section 4.3]

(2) style descriptors are used for font matching *not* the underlying
    style data in the font [Section 4.4]

IE9 currently looks for a *family* name of "xxx", which is wrong, it
should be looking for the *fullname*.  The fullname identifies a
single face uniquely.  Webkit looks up via the fullname but it uses font
descriptor API's to do the style mapping which results in it basing
the style mapping on the data in the fonts themselves, which is wrong.

> If this is true, then my next question is: is this really what
> authors want ? It seems the only way they will get italics in this
> case is by using a font file that only contains an italic face,
> right ?

No, the right way to do this would be:

@font-face
{
	font-family: MyTestFont;
	src: local(Arial Italic); /* fullname of the italic face of Arial */
	font-style: italic;
}

Here "Arial Italic" is the *fullname* of the italic face of Arial. 
That uniquely identifies that face.

Consider the example below, the first and third paragraphs should
render the same:

http://people.mozilla.org/~jdaggett/webfonts/droidserif-test.html

The third paragraph uses inverted style definitions and inverted
font-face definitions, thus matching the first paragraph.  Using src:
local() should work exactly the same way.

The point of this is to allow authors flexibility in the way they
construct font families and that the style mapping of @font-face
defined font families is the same whether local() or url() is used.  I
do think understanding the family/fullname distinction will trip up
some authors at first but in the long run it will cause less confusion
than relying on OS-level font matching algorithms which vary across
platforms.

Probably a few examples of @font-face style matching would probably go
a long way to clarifying some of this, although only where the spec
wording makes the matching rules explicit.

Regards,

John
Received on Monday, 13 September 2010 20:32:05 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:31 GMT