Police CSS3
Règles CSS3 @font-face
Dans les versions précédentes de CSS3, les concepteurs Web devaient utiliser des polices déjà installées sur l'ordinateur de l'utilisateur.
Avec CSS3, un concepteur Web peut utiliser n'importe quelle police qu'il souhaite.
Lorsque vous trouvez un fichier de police que vous souhaitez utiliser, incluez simplement le fichier de police sur votre site Web et il sera automatiquement téléchargé pour les utilisateurs qui en ont besoin.
La police que vous choisissez est décrite dans la nouvelle version CSS3 avec les règles @font-face.
Votre "propre" police est définie dans la règle CSS3 @font-face.
Utilisez la police dont vous avez besoin
dans la nouvelle @font- face, vous devez d'abord définir le nom de la police (comme myFirstFont), puis pointer vers le fichier de police.
Conseils : Veuillez utiliser des polices minuscules pour les URL. Les lettres majuscules produiront des résultats inattendus dans IE
Si vous devez utiliser des polices pour les éléments HTML, veuillez transmettre la famille de polices. attribut pour référencer le nom de la police (myFirstFont) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>Utiliser du texte en gras
Vous devez ajouter une autre règle @font-face qui contient du texte en gras :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器 @font-face rule.</p>
</body>
</html>Le Le fichier "Sansation_Bold.ttf" est un autre fichier de police qui contient le texte en gras de la police Sansation.
Les navigateurs utilisant la famille de polices « myFirstFont » pour ce texte doivent le rendre en gras.
De cette façon, vous pouvez avoir plusieurs règles @font-face pour la même police.
Description des polices CSS3
Le tableau suivant répertorie toutes les descriptions de polices et les définitions des règles @font-face à l'intérieur :
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
| 可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style |
| 可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
| 可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
