English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
@font-La règle face est utilisée pour associer un nom de police à certaines polices téléchargeables à utiliser dans la feuille de style, @font-face CSS at-rule spécifie une police personnalisée utilisée pour afficher du texte.
La règle utilisée dans le système de policesfont-familyLes descripteurs utilisés pour nommer la police et les descripteurs src associés au nom de police externe.
La syntaxe de cette règle est la suivante :
@font-face: font-description
Le @font-Les règles face contiennent une ou plusieurs déclarations d'attributs, comme celles dans les CSS conventionnelles, ce qui est appelé description de police. Vous pouvez spécifier au maximum24différents attributs, mais toutes leurs explications dépassent le domaine de cette référence.-Pour plus d'informations, veuillez visiterW3C CSS module de policepage.
@font-La forme générale des règles face est :
Plus tard, la police peut être utilisée comme attribut (commefont-familyet) du nomfontCependant, si le support des polices téléchargeables ou le chargement des polices est impossible pour une raison quelconque, il convient de spécifier d'autres noms de polices en tant que réserves.
L'exemple suivant montre comment utiliser @font-attribut face.
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
body {
font-family: "OpenSans", Arial, sans-serif;
font-size: 1.2em;
}Voyons si ça marche‹/›Attention :En utilisant @ font-Les règles face, vous n'avez pas besoin de dépendre du nombre limité de polices installées sur l'ordinateur de l'utilisateur.
En définissant les règles correspondantes, vous pouvez également définir le choix des polices téléchargeables spécifiques lorsque vous avez configuré des caractéristiques spécifiques de police telles que gras ou italic, même si vous avez configuré les règles face.-face。
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansBold";
src: url("../fonts/OpenSans-Bold.eot");
src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}
h1 {
font-family: "OpenSansBold", Arial, sans-serif; /* Spécifiez la police OpenSans en gras */
}
p {
font-family: "OpenSans", Arial, sans-serif;
}Voyons si ça marche‹/›Le sens des paramètres est le suivant :
| Paramètre | Valeur | Description |
|---|---|---|
| Obligatoire -Les paramètres suivants sont obligatoires. | ||
| font-family | font-family | Définir ce qui sera utiliséfont-familyNom de la police pour la valeur de l'attribut de la police. |
| src | src | Spécifiez l'emplacement du fichier de police à utiliser. |
| Optionnel -Les paramètres suivants sont optionnels. | ||
| font-style | font-style | Validefont-styleValeur de l'attribut. |
| font-weight | font-weight | Validefont-weightValeur de l'attribut (valeur relative bolder et lighter除外). |
@font-La compatibilité du navigateur pour la propriété face, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette règle.
|
Attention :Dans les navigateurs, les différences de support pour les technologies de polices spécifiques sont très grandes. Internet Explorer prend en charge les polices de type .eot et .wof, tandis que Firefox, Chrome, Safari et Opera prennent en charge les types .woff, .ttf et .otf des polices.
Veuillez consulter les tutoriels suivants :Polices de caractères CSS.