Re: [css3-fonts] @font-face font-family names used in other @font-face rules

On Mar 4, 2013 6:32 AM, "Adam Prescott" <adam@aprescott.com> wrote:
>
> As you all know, the @font-face rule allows a new font-family name to
> be defined, and the src property defines where the font can be found.
> However, there is no way to "chain" @font-face rules together, I
> believe. If there is, I couldn't find it in the current CSS Fonts
> module spec.
>
> Let me give a use-case, which I described in a blog post elsewhere[1].
>
> Google Web Fonts (or some other third party) may have provided a
> @font-face rule via a <script> or @import, which would have the effect
> of giving this CSS:
>
>   @font-face {
>     font-family: FooBar;
>     src: local("Foo Bar"), url("...") format("...");
>   }
>
> In your own CSS, you may wish to use unicode-range to restrict the
> styling of FooBar to only certain characters (in this case, &):
>
>   @font-face {
>     font-family: Baz;
>     src: local("FooBar"); /* doesn't work */
>     unicode-range: U+26;
>   }
>
>   p { font-family: Baz, serif; }
>
> This is especially useful if the third party has returned a version of
> FooBar containing only glyphs for U+0026, versus the entire set of
> characters (increasing loading times). But, because FooBar is not
> installed locally, local("FooBar") won't apply, and so Baz cannot be
> used for this purpose.
>
> Is there any way to achieve this? If not, perhaps something similar to
> local() could be defined that would use other @font-face rules. Or
> maybe local() could also do that. In either case, perhaps there are
> parallelism issues: if the @font-face rule is in a separate file (or
> comes via a <script>), then unless a @font-face rule should block (as
> in block the CSS processing) on local() font-family values, the name
> might not yet be available? Although perhaps on subsequent requests
> the browser would likely have the @font-face font name available and
> would know it can be used?
>
> [1]: https://aprescott.com/posts/specific-character-fonts

Actually, your use case is already handled by the spec - just create
multiple @font-face rules with the same name, and the browser will
automatically combine them together into a single face. You may already
know that this works with weight/style/etc, but it works with unicode-range
too.

~TJ

Received on Monday, 4 March 2013 15:32:01 UTC