How to Embed Multiple Font Variations Using @font-face?

How to Embed Multiple Font Variations with @font-face

When using @font-face to embed custom fonts, it can be helpful to support multiple variations, such as bold, italic, and a combination of both. Here's a detailed explanation on how to embed multiple font files for the same font:

Creating @font-face Rules for Each Variation

To embed different variants of a font, create separate @font-face rules for each variation. For example, for a font family named "DejaVu Sans," you would create the following rules:

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

Assigning Font Variations to HTML Elements

Once the @font-face rules are defined, you can assign the different variations to HTML elements using the font-weight and font-style properties. For example:

strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

This will apply the bold variation of the DejaVu Sans font to all strong elements.

Note:

• It's important to create separate @font-face rules for each variation, as the browser cannot automatically understand the relationship between the files.
• The "format()" argument is not supported by all browsers, so it's recommended to omit it.
• CSS3 only allows for a single font-style value, unlike CSS2, which supported a comma-separated list.

The above is the detailed content of How to Embed Multiple Font Variations Using @font-face?. For more information, please follow other related articles on the PHP Chinese website!