[css-fonts-5] Add font-size descriptor to @font-face which allows ranges (for optical sizing)

[robmck-ms]

The current draft of the Fonts module defines the font-optical-sizing property, which will automatically chooses a variable font instance along the optical size axis for the given text span/block. I propose that this be extended to support automatic optical style switching for static font families as well.

Option 1:
Add a font-size-range property to @font-face rules. This property defines the size range for which this @font-face rule is applicable.

@font-face {
	src: url(http://example.com/fonts/chepman-text.ttf);
	font-family: Chepman;
	opticalfont-size-range: 0pt-18pt;
}
@font-face {
	src: url(http://example.com/fonts/chepman-heading.ttf);
	font-family: Chepman;
	opticalfont-size-range: 18pt-36pt;
}

article {
	font-family: Chepman;
	font-size: 12pt;
}
article h1 {
	font-family: Chepman;
	font-size: 20pt;
}

Option 2:
The above handles web fonts but not locally installed fonts. For local fonts, we can take advantage of the STAT table introduced in the OpenType 1.8 spec. In static fonts, the STAT table provides the same sort of information that an @font-face rule does for web fonts (except src, which is already known). One of the parameters in the STAT table defines a size range for which the given font is applicable (provides the functional equivalent to font-size-range, above).

So, one could simply have the following in CSS:

article {
	font-family: Chepman;
	font-size: 12pt;
}
article h1 {
	font-family: Chepman;
	font-size: 20pt;
}

Browsers that want to support this would have to extend their font selection algorithm to also include PreferredFamilyName (NameID 16 from the name table) as the value for PreferredFamilyName will be exactly the same for all fonts in the font family.

[litherum]

font-size is already an input to the font selection algorithm, so, option 2 is already spec-compliant. The selection algorithm is purposely vague about how font-size gets matched, so we could add something saying that optical sizes may be considered when performing font-size matching.

Is there a reason you didn't propose using font-size inside @font-face instead of opticalfont-size-range?

If we do add a font-size size range to @font-face, the values should not be clamped to this range (which would be different than the other range-based font descriptors in @font-face - see #782)

[robmck-ms]

My mistake: opticalfont-size-range is a copy-paste error from an old proposal I was preparing. Why use font-size-range instead of font-size? I had assumed that properties which appear in @font-face must use the same syntax as when they appear in a selector outside @font-face. Since font-size doesn't allow ranges, I figured we'd need to create a new property.

If extending the font-size property in @font-face is allowable, then I'm fine with that too.

[litherum]

I had assumed that properties which appear in @font-face must use the same syntax as when they appear in a selector outside @font-face.

Nope. Currently, for variation fonts, the descriptors allow ranges but the properties only allow a single value.

[litherum]

See also: #731

[svgeesus]

The font-size descriptor has been added in CSS Fonts 5, and supports a range.

[cdoublev]

Can you please clarify (at least for me) if the number match the value in px?