Maison  >  Article  >  interface Web  >  Quels sont les attributs pour définir les polices en HTML ?

Quels sont les attributs pour définir les polices en HTML ?

青灯夜游
青灯夜游original
2021-06-08 17:30:3510702parcourir

Définir les attributs de police en HTML : police, font-family, font-size, font-style, font-variant, font-weight, "@font-face", font-size-adjust, font-stretch .

Quels sont les attributs pour définir les polices en HTML ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Les propriétés de police définissent la police, le gras, la taille et le style du texte.

Définir les attributs de police en HTML

属性 说明
font 在一个声明中设置所有字体属性
font-family 规定文本的字体系列
font-size 规定文本的字体尺寸
font-style 规定文本的字体样式
font-variant 规定文本的字体样式。设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-weight 规定字体的粗细
@font-face 一个规则,允许网站下载并使用其他超过"Web- safe"字体的字体
font-size-adjust 为元素规定 aspect 值。为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
font-stretch 收缩或拉伸当前的字体系列。对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

Informations étendues :

En HTML/CSS, il existe deux types du nom de la famille de polices :

  • Famille de polices universelle - une combinaison de systèmes de polices avec une apparence similaire (comme "Serif" ou "Monospace")

  • Famille de polices spécifique - Une famille de polices spécifique (telle que "Times" ou "Courier")

Generic family 字体系列 说明
Serif Times New Roman
Georgia
Serif字体中字符在行的末端拥有额外的装饰
Sans-serif Arial
Verdana
"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace Courier New
Lucida Console
所有的等宽字符具有相同的宽度

La propriété font-family doit définir plusieurs noms de polices comme un seul " mécanisme de secours", si le navigateur ne prend pas en charge la première police, il essaiera la police suivante.

Remarque : Si le nom de la famille de polices comporte plusieurs caractères, il doit être entre guillemets, par exemple Famille de polices : "宋体".

Plusieurs familles de polices sont spécifiées en les séparant par une virgule :

p{font-family:"Times New Roman", Times, serif;}

Voici quelques combinaisons de polices et familles de polices courantes utilisées.

Police Serif

Exemple de texte"Palatino Linotype", "Book Antiqua", Palatino, empattement tr>
Police
Géorgie, empattement

Ceci est un titre

Ceci est un paragraphe

字体 文本示例
Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

Ceci est un titre

Ceci est un paragraphe

"Times New Roman", Times, serif

Ceci est un titre

Ceci est un paragraphe

sans - serif字体

字体 文本示例
Arial, Helvetica, sans-serif

Ceci est un titre

Ceci est un paragraphe

字体 文本示例
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

Arial Black, Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Arial Black, Gadget, sans-serif

Ceci est un titre

Ceci est un paragraphe

"Comic Sans MS", cursive, sans empattement

Ceci est un titre

Ceci est un paragraphe

Impact, Charbon, sans empattement

Ceci est un titre

Ceci est un paragraphe

字体 文本示例
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Ceci est un en-tête

Ceci est un paragraphe

Tahoma, Genève, sans-serif

Ceci est un titre

Ceci est un paragraphe

"Trebuchet MS", Helvetica, sans-serif

Ceci est un titre

Ceci est un paragraphe

Verdana, Genève, sans-serif

Ceci est un titre

Ceci est un paragraphe

Monospace 字体
字体 文本示例
"Courier New", Courrier, monospace

Ceci est un titre

Ceci est un paragraphe

"Console Lucida", Monaco, monospace

Ceci est un titre

Ceci est un paragraphe

(学习视频分享:css视频教程)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Que signifient HTTP et HTML ?Article suivant:Que signifient HTTP et HTML ?