How Can I Embed Multiple Font Variants (Bold, Italic) in a Single @font-face Rule?

Multiple Font Variants in a Single @font-face Rule

In CSS, the @font-face rule allows you to embed custom fonts into a web page. However, when working with multiple font variants (e.g., bold, italic, bold italic), it can be unclear how to specify them in a single rule.

To embed multiple font files for the same font, you can use multiple @font-face rules. For instance, if you have separate files for DejaVu Sans bold, italic, and bold italic:

@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;
}

In the above example, each @font-face rule specifies a different font variant. When a web browser encounters a font-style declaration (e.g., font-weight: bold), it will load the corresponding font file and apply the appropriate styling.

Note that Chrome does not recognize the format("ttf") argument in the above example, so it can be omitted. Additionally, CSS3 only permits one font-style declaration per @font-face rule, rather than a comma-separated list as shown in the example.

The above is the detailed content of How Can I Embed Multiple Font Variants (Bold, Italic) in a Single @font-face Rule?. For more information, please follow other related articles on the PHP Chinese website!