13 attributs de style de police CSS couramment utilisés, lesquels connaissez-vous ?

Cet article vous présente quelques attributs de style de police CSS, qui sont couramment utilisés lors de la définition des styles de police. J'espère qu'il vous sera utile.

1. Propriétés du style de police CSS

1.1 font-size taille de la police

font-size 字体大小
1. font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

   font-size: 14px; // px 绝对像素单位font-size: 1em; // 相对父元素字体大小单位// 注：每个元素必须有字体大小，如果没有申明，则直接使用父元素的字体大小//    如果没有父元素（html）则使用基准字号，基准字号为浏览器里设置的字号

2. 现在网页中普遍使用14px+
3. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
4. 其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

1.2 font-family字体样式

1. font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅 黑，可以使用如下CSS样式代码：

    p{ 
    	font-family:"微软雅黑";
    }
    // 注: 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

2. 各种字体之间必须使用英文状态下的逗号隔开。
3. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
4. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
5. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
6. 一般网页中用的较多的字体为 arial，此字体是乔布斯研发的

1.3 CSS Unicode字体

1. 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

2. 方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

3. 方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 font-family: “5FAE8F6F96C59ED1”，表示设置字体为“微软雅黑”。



4. 可以通过escape() 来测试属于什么字体。

   体名称	英文名称	Unicode 编码
   宋体	SimSun	5B8B4F53
   新宋体	NSimSun	65B05B8B4F53
   黑体	SimHei	9ED14F53
   微软雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
   楷体GB2312	KaiTiGB2312	69774F53_GB2312
   隶书	LiSu	96B64E66
   幼圆	YouYuan	5E7C5706
   华文细黑	STXihei	534E65877EC69ED1
   细明体	MingLiU	7EC6660E4F53

注:为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

1.4 font-weight 字体粗细

1. 字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
2. 拓展： strong元素，默认加粗。strong元素表示重要的不能忽略的内容

   属性	属性值	作用
   font-weight:	normal（简写400）	不加粗
   	bold（简写700）	加粗
   	100~900（100的整倍数）	数值越大字体越粗

注：css 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

1.5 font-style 字体风格

1. 字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS Propriété font-size Utilisé pour définir la taille de la police. La valeur de cet attribut peut utiliser des unités de longueur relative ou des unités de longueur absolue.

   选择器{
   	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型，大小和类型不能省略

2. De nos jours, 14px+ est couramment utilisé dans les pages WebEssayez d'utiliser un nombre pair de tailles de police. Les anciens navigateurs tels que IE6 auront des bugs lors de la prise en charge des nombres impairs. 1.2 L'attribut font-familyFont style
   Diverses polices Elles doivent être séparées par des virgules en anglais. Les polices chinoises doivent être citées en anglais, alors que les polices anglaises n'ont généralement pas besoin d'être citées. Lorsque vous devez définir une police anglaise, le nom de la police anglaise doit précéder le nom de la police chinoise. 1.3 Police CSS Unicode
   Définissez le nom de la police en CSS et écrivez directement le chinois. Cependant, des erreurs tronquées se produiront lorsque l'encodage du fichier (GB2312, UTF-8, etc.) ne correspond pas. Le système XP ne prend pas en charge le chinois similaire à Microsoft Yahei. Option 1 : Vous pouvez utiliser l'anglais à la place. Par exemple, famille de polices : « Microsoft Yahei ». Option 2 : Utiliser directement l'encodage Unicode pour écrire le nom de la police en CSS peut éviter ces erreurs. Utilisez Unicode pour écrire les noms de polices chinoises et le navigateur pourra les analyser correctement. font-family : "5FAE8F6F96C59ED1" signifie définir la police sur "Microsoft Yahei".

   Parmi elles, l'unité de longueur relative est plus couramment utilisée, et l'unité de pixel px est recommandée, tandis que l'unité de longueur absolue est rarement utilisée. Les détails sont les suivants :		font-family est utilisé pour définir la police. Les polices couramment utilisées dans les pages Web incluent Song Dynasty, Microsoft YaHei, HeiTi, etc. Par exemple, pour définir la police de tout le texte des paragraphes de la page Web sur Microsoft YaHei, vous pouvez utiliser le style CSS suivant code : p{ letter-spacing : 2px;}
   Si le nom de la police contient des symboles tels que des espaces, #, $, etc., la police doit être entourée de guillemets simples ou doubles en anglais, par exemple, font-family : « Times New Roman » ;.	Essayez d'utiliser la police par défaut du système pour vous assurer qu'elle peut être affichée correctement dans le navigateur de n'importe quel utilisateur.	La police la plus couramment utilisée dans les pages Web est arial, qui a été développée par Steve Jobs

   🎜 🎜🎜Vous pouvez utiliser escape() pour tester à quelle police il appartient. 🎜🎜🎜🎜🎜Nom du type🎜🎜Nom anglais🎜🎜Encodage Unicode🎜🎜🎜🎜🎜🎜SimSun🎜🎜5B8B4F53🎜🎜🎜🎜New Song Dynasty🎜 🎜NSimSun 🎜🎜65B05B8B4F53🎜🎜🎜🎜黑体🎜🎜SimHei🎜🎜 9ED14F53🎜 🎜🎜🎜Microsoft YaHei🎜🎜Microsoft YaHei🎜🎜5FAE8F6F96C59ED1🎜🎜🎜🎜楷体GB2312🎜🎜KaiTiGB2312🎜🎜69774F53_GB2 312🎜 🎜🎜🎜script officiel🎜🎜LiSu🎜🎜96B64E66🎜🎜🎜🎜Youyuan🎜🎜YouYuan🎜🎜5E7C5706 🎜🎜 🎜🎜Chinese Fine Black🎜🎜STXihei🎜🎜534E65877EC69ED1🎜🎜🎜🎜Fine Body🎜🎜MingLiU🎜🎜7EC6660E4F53🎜🎜🎜🎜 🎜
🎜Remarque : Afin de résoudre les problèmes d'installation des polices sur différents ordinateurs, nous essayons pour utiliser uniquement les polices chinoises Song Dynasty et Microsoft Yahei🎜🎜🎜1.4 font-weight poids de la police
🎜Police grasse sauf utiliser b et En plus de la balise strong, vous pouvez utiliser CSS pour y parvenir, mais CSS n'a pas de sémantique. 🎜🎜Extension : élément fort, gras par défaut. L'élément fort représente un contenu important qui ne peut être ignoré🎜🎜🎜🎜Attribut🎜🎜Valeur de l'attribut🎜🎜Fonction🎜🎜🎜🎜🎜🎜font-weight:🎜🎜normal (abréviation 400)🎜🎜pas gras🎜🎜🎜🎜bold (abréviation 700)🎜🎜Gras🎜🎜🎜🎜100~900 (multiples entiers de 100)🎜🎜Plus la valeur est grande, plus la police est grasse🎜🎜🎜🎜🎜
🎜Remarque : Le numéro CSS 400 est équivalent à la normale, et 700 etc. Prix en gras. Mais nous préférons l’exprimer en chiffres. 🎜🎜🎜1.5 font-style Style de police
🎜Police italique sauf avec les balises i et em Sinon, vous pouvez utiliser CSS pour y parvenir, mais CSS n'a pas de sémantique. 🎜🎜Expansion : Le langage exprimé par l'élément i : Ce morceau de texte est un texte spécial En utilisation réelle, il est généralement utilisé pour représenter une icône 🎜🎜🎜🎜Attributs🎜🎜Valeur d'attribut🎜🎜Fonction🎜🎜🎜🎜. 🎜🎜font -style:🎜🎜normal🎜🎜Valeur par défaut, le navigateur affichera le style de police standard🎜🎜🎜🎜italique🎜🎜Le navigateur affichera le style de police italique🎜🎜🎜🎜oblique🎜🎜Le navigateur affichera l'italique style de police🎜 🎜🎜🎜

注：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式

1.6 font 文字属性速写 (重点)

1. font属性用于对字体样式进行综合设置，其基本语法格式如下：

   选择器{
   	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型，大小和类型不能省略

2. 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
3. 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

1.7 letter-spacing 字体间距

1. letter-spacing就是文字与文字间的间距，值可以负数，默认值normal

   p{
   	letter-spacing : 2px;}

1.8 text-decoration 文本修饰：加线

1. line-through：穿过文字，表示中间加条线
2. overline：上面加条线（少用）
3. underline：下面加条线
4. none：表示没有线，去掉线
5. 拓展： del、s元素默认中间加线；del元素表示废弃、错误的内容；s元素表示过期的内容；a元素默认下面加线，表示超链接

1.9 text-indent 首行文本缩进

1. px：缩进多少像素
2. em：缩进几个字体（中英文缩进宽度值一样）

2.0 line-height 文本行高/垂直居中

1. 每行文本的高度，该值越大，每行文本的值越大
2. 设置行高为容器高度，可以让单行文本垂直居中，容器高度为如：height：50px
3. 行高可以设置为纯数字，表示相对于当前元素的字体大小。如取值1.5:行高为文字的1.5倍，这样文字在放大的时候，行高也在变大，不会出现文字重叠现象

2.1 letter-spacing 文字间隙

1. em：每个文字间隔几个字体宽度
2. px：每个文字间隔几个像素

2.2 text-align 文字、行盒、行块盒水平排列方式

1. left：靠左，默认靠左排列
2. center：居中
3. right：靠右

2.3 网页的最小和最大宽度

1. 设置在body元素的css里
2. min-width: 1000px 最小像素
3. max-width: 1500px 最大像素

（学习视频分享：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!