If multiple sources are listed in an @font-face, a

2019-03-23 08:35发布

问题:

I'm seeking to optimize the speed of my site and want to know of browers would only load the file they need from the following code or all font files:

@font-face {
    font-family: 'Proxima Nova';
    src: url('proximanova-regitalic-webfont.eot');
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regitalic-webfont.woff') format('woff'),
         url('proximanova-regitalic-webfont.ttf') format('truetype'),
         url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

Also, is this the most optimal way of doing @font-face? Are there any other strategies to reduce load time for the users?

回答1:

A typical browser should attempt to load the fonts in the list one by one, depending on what format it supports, starting from the first in the list. Once it obtains a font file that it can use, it doesn't attempt to load any of the rest of the files in the list. If a browser doesn't support a particular format, it should never attempt to load that font; it should move straight on to the next source and looks at that.

This is similar to how a browser uses a font stack in the font-family property.

Of course, not all browsers behave conformingly to the spec. Some browsers like IE will try to download as many fonts as they can or parse the rule in unexpected ways; see the comments for more info and research.

CSS is already designed to help minimize the load time and number of requests through this sequential approach. If your fonts are taking too long to arrive from your own server, consider using a fast CDN instead like Google Web Fonts, Typekit or Adobe Edge.



回答2:

To answer this question, I have cited relevant passages from the following W3C document:

CSS Fonts Module Level 3
W3C Candidate Recommendation 3 October 2013

(In the cited material, note that I have emphasized those sentences that are most pertinent to the question.)


4.1 The @font-face rule

The @font-face rule allows for linking to fonts that are automatically fetched and activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on a given platform. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.

4.3 Font reference: the src descriptor

This descriptor specifies the resource containing font data. It is required for the @font-face rule to be valid. Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate. Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.

...

External references consist of a URL, followed by an optional hint describing the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. Conformant user agents must skip downloading a font resource if the format hints indicate only unsupported or unknown font formats. If no format hints are supplied, the user agent should download the font resource.

    /* load WOFF font if possible, otherwise use OpenType font */
    @font-face {
      font-family: bodytext;
      src: url(ideal-sans-serif.woff) format("woff"),
           url(basic-sans-serif.ttf) format("opentype");
    }