How to add multiple font files for the same font?

问题:

I\'m looking at the MDC page for the @font-face CSS rule, but I don\'t get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have:

@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"./fonts/DejaVuSans.ttf\") format(\"ttf\");
}
strong {
    font-family: \"DejaVu Sans\";
    font-weight: bold;
}

The browser will not know which font to be used for bold (because that file is DejaVuSansBold.ttf), so it will default to something I probably don\'t want. How can I tell the browser all the different variants I have for a certain font?

回答1:

The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans.ttf\");
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-Bold.ttf\");
    font-weight: bold;
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-Oblique.ttf\");
    font-style: italic, oblique;
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-BoldOblique.ttf\");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem Google Chrome doesn\'t know about the format(\"ttf\") argument, so you might want to skip that.

(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)

回答2:

As of CSS3, the spec has changed, allowing for only a single font-style. A comma-separated list (per CSS2) will be treated as if it were normal and override any earlier (default) entry. This will make fonts defined in this way appear italic permanently.

@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans.ttf\");
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-Bold.ttf\");
    font-weight: bold;
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-Oblique.ttf\");
    font-style: italic;
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-BoldOblique.ttf\");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-Oblique.ttf\");
    font-style: oblique;
}
@font-face {
    font-family: \"DejaVu Sans\";
    src: url(\"fonts/DejaVuSans-BoldOblique.ttf\");
    font-weight: bold;
    font-style: oblique;
}

In most cases, italic will probably be sufficient and oblique rules won\'t be necessary if you take care to define whichever you will use and stick to it.

回答3:

If you are using Google fonts I would suggest the following.

If you want the fonts to run from your localhost or server you need to download the files.

Instead of downloading the ttf packages in the download links, use the live link they provide, for example:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Paste the URL in your browser and you should get a font-face declaration similar to the first answer.

Open the URLs provided, download and rename the files.

Stick the updated font-face declarations with relative paths to the woff files in your CSS, and you are done.

回答4:

To have font variation working correctly, I had to reverse the order of @font-face in CSS.

@font-face {
    font-family: \"DejaVuMono\";
    src: url(\"styles/DejaVuSansMono-BoldOblique.ttf\");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: \"DejaVuMono\";
    src: url(\"styles/DejaVuSansMono-Oblique.ttf\");
    font-style: italic, oblique;
}
@font-face {
    font-family: \"DejaVuMono\";
    src: url(\"styles/DejaVuSansMono-Bold.ttf\");
    font-weight: bold;
}
 @font-face {
    font-family: \"DejaVuMono\";
    src: url(\"styles/DejaVuSansMono.ttf\");
}

回答5:

nowadays,2017-12-17. I don\'t find any description about Font-property-order‘s necessity in spec. And I test in chrome always works whatever the order is.

@font-face {
  font-family: \'Font Awesome 5 Free\';
  font-weight: 900;
  src: url(\'#{$fa-font-path}/fa-solid-900.eot\');
  src: url(\'#{$fa-font-path}/fa-solid-900.eot?#iefix\') format(\'embedded-opentype\'),
  url(\'#{$fa-font-path}/fa-solid-900.woff2\') format(\'woff2\'),
  url(\'#{$fa-font-path}/fa-solid-900.woff\') format(\'woff\'),
  url(\'#{$fa-font-path}/fa-solid-900.ttf\') format(\'truetype\'),
  url(\'#{$fa-font-path}/fa-solid-900.svg#fontawesome\') format(\'svg\');
}

@font-face {
  font-family: \'Font Awesome 5 Free\';
  font-weight: 400;
  src: url(\'#{$fa-font-path}/fa-regular-400.eot\');
  src: url(\'#{$fa-font-path}/fa-regular-400.eot?#iefix\') format(\'embedded-opentype\'),
  url(\'#{$fa-font-path}/fa-regular-400.woff2\') format(\'woff2\'),
  url(\'#{$fa-font-path}/fa-regular-400.woff\') format(\'woff\'),
  url(\'#{$fa-font-path}/fa-regular-400.ttf\') format(\'truetype\'),
  url(\'#{$fa-font-path}/fa-regular-400.svg#fontawesome\') format(\'svg\');
}

回答6:

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: \'DejaVu Sans\';
    src: url(\'dejavu/DejaVuSans.ttf\'); /* IE9 Compat Modes */
    src: 
        local(\'DejaVu Sans\'),
        local(\'DejaVu-Sans\'), /* Duplicated name with hyphen */
        url(\'dejavu/DejaVuSans.ttf\') 
        format(\'truetype\');
}
/*bold version*/
@font-face {
    font-family: \'DejaVu Sans\';
    src: url(\'dejavu/DejaVuSans-Bold.ttf\'); 
    src: 
        local(\'DejaVu Sans\'),
        local(\'DejaVu-Sans\'),
        url(\'dejavu/DejaVuSans-Bold.ttf\') 
        format(\'truetype\');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: \'DejaVu Sans\';
    src: url(\'dejavu/DejaVuSans-Oblique.ttf\'); 
    src: 
        local(\'DejaVu Sans\'),
        local(\'DejaVu-Sans\'),
        url(\'dejavu/DejaVuSans-Oblique.ttf\') 
        format(\'truetype\');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: \'DejaVu Sans\';
    src: url(\'dejavu/DejaVuSans-BoldOblique.ttf\'); 
    src: 
        local(\'DejaVu Sans\'),
        local(\'DejaVu-Sans\'),
        url(\'dejavu/DejaVuSans-BoldOblique.ttf\') 
        format(\'truetype\');
    font-weight: bold;
    font-style: italic;
}