Polices CSS3
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中文網(wǎng)(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,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體
</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中文網(wǎng)(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,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體。
</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 | 必需。規(guī)定字體的名稱。 |
| src | URL | 必需。定義字體文件的 URL。 |
| font-stretch |
| 可選。定義如何拉伸字體。默認(rèn)是 "normal"。 |
| font-style |
| 可選。定義字體的樣式。默認(rèn)是 "normal"。 |
| font-weight |
| 可選。定義字體的粗細(xì)。默認(rèn)是 "normal"。 |
| unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。 |
