How Can I Embed Multiple Font Variants (Bold, Italic) Using @font-face in CSS?

Embedding Multiple Font Variants with @font-face

In CSS, the @font-face rule allows you to embed custom fonts into your web pages. However, what if you have multiple variants of the same font, such as bold, italic, or both? How can you ensure that the browser loads and uses the correct variant?

The solution is to create multiple @font-face rules, each specifying the desired variant. For example, to embed DejaVu Sans in bold and italic variations:

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

This code ensures that when you set the font-family to "DejaVu Sans" and apply the bold and/or italic styles, the browser will load the appropriate variant of the font.

Note that the format("ttf") argument is optional and may not be necessary in all browsers. Also, CSS3 introduced a simplified syntax for specifying font styles. Instead of using multiple @font-face rules, you can use a comma-separated list of font-weight and font-style values in a single rule:

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

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