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中文网(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 condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Polices CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]