13 häufig verwendete CSS-Schriftartattribute, welche kennen Sie?

Dieser Artikel stellt Ihnen einige CSS-Schriftartattribute vor, die häufig beim Festlegen von Schriftstilen verwendet werden. Ich hoffe, dass er Ihnen hilfreich sein wird.

1. CSS-Schriftarteigenschaften

1.1 font-size-Schriftgröße

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 来实现，但是CSSfont-size-Eigenschaft Wird verwendet, um die Schriftgröße festzulegen. Der Wert dieses Attributs kann relative Längeneinheiten oder absolute Längeneinheiten verwenden.

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

2. Heutzutage wird 14px+ häufig auf Webseiten verwendetVersuchen Sie, eine gerade Anzahl von Schriftgrößen zu verwenden. Bei alten Browsern wie IE6 treten Fehler bei der Unterstützung ungerader Zahlen auf. 1.2 Das Attribut font-familySchriftstil
   Verschiedene Schriftarten Sie müssen im Englischen durch Kommas getrennt werden. Chinesische Schriftarten müssen in Englisch zitiert werden, während englische Schriftarten im Allgemeinen nicht zitiert werden müssen. Wenn Sie eine englische Schriftart festlegen müssen, muss der Name der englischen Schriftart vor dem Namen der chinesischen Schriftart stehen. 1.3 CSS Unicode-Schriftart
   Legen Sie den Schriftartnamen in CSS fest und schreiben Sie direkt Chinesisch. Allerdings treten verstümmelte Fehler auf, wenn die Dateikodierung (GB2312, UTF-8 usw.) nicht übereinstimmt. Das XP-System unterstützt kein Chinesisch, ähnlich wie Microsoft Yahei. Option 1: Sie können stattdessen Englisch verwenden. Zum Beispiel Schriftfamilie: „Microsoft Yahei“. Option 2: Die direkte Verwendung der Unicode-Codierung zum Schreiben des Schriftartnamens in CSS kann diese Fehler vermeiden. Verwenden Sie Unicode, um chinesische Schriftartnamen zu schreiben, und der Browser kann sie korrekt analysieren. Schriftfamilie: „5FAE8F6F96C59ED1“ bedeutet, dass die Schriftart auf „Microsoft Yahei“ eingestellt ist.

   Unter diesen wird am häufigsten die relative Längeneinheit verwendet, und die Pixeleinheit px wird empfohlen, während die absolute Längeneinheit selten verwendet wird. Die Details lauten wie folgt:		font-family ist Wird verwendet, um die Schriftart festzulegen. Zu den häufig verwendeten Schriftarten auf Webseiten gehören Song Dynasty, Microsoft YaHei, HeiTi usw. Um beispielsweise die Schriftart für den gesamten Absatztext auf der Webseite auf Microsoft YaHei festzulegen, können Sie den folgenden CSS-Stil verwenden Code: p{ letter-spacing : 2px;}
   Wenn der Schriftartname Symbole wie Leerzeichen, #, $ usw. enthält, muss die Schriftart im Englischen in einfache oder doppelte Anführungszeichen gesetzt werden, zum Beispiel Schriftfamilie: „Times New Roman“;.	Versuchen Sie, die Standardschriftart des Systems zu verwenden, um sicherzustellen, dass sie in jedem Browser des Benutzers korrekt angezeigt wird.	Die am häufigsten verwendete Schriftart auf Webseiten ist Arial, die von Steve Jobs entwickelt wurde

   🎜 🎜🎜Sie können escape() verwenden, um zu testen, zu welcher Schriftart es gehört. 🎜🎜🎜🎜🎜Typname🎜🎜Englischer Name🎜🎜Unicode-Kodierung🎜🎜🎜🎜🎜🎜SimSun🎜🎜5B8B4F53🎜🎜🎜🎜Neue Song-Dynastie🎜. 🎜NSimSun 🎜🎜65B05B8B4F53🎜🎜🎜🎜黑体🎜🎜SimHei🎜🎜 9ED14F53🎜 🎜🎜🎜Microsoft YaHei🎜🎜Microsoft YaHei🎜🎜5FAE8F6F96C59ED1🎜🎜🎜🎜楷体GB2312🎜🎜KaiTiGB2312🎜🎜69774F53_GB2 312 🎜🎜🎜🎜offizielles Drehbuch🎜🎜LiSu🎜🎜96B64E66🎜🎜🎜🎜Youyuan🎜🎜YouYuan🎜🎜5E7C5706 🎜🎜 🎜🎜Chinese Fine Black🎜🎜STXihei🎜🎜534E65877EC69ED1🎜🎜🎜🎜Fine Body🎜🎜MingLiU🎜🎜7EC6660E4F53🎜🎜🎜🎜 🎜
🎜Hinweis: Um Probleme bei der Schriftinstallation auf verschiedenen Computern zu lösen, versuchen wir es Verwenden Sie ausschließlich chinesische Schriftarten von Song Dynasty und Microsoft Yahei und Zusätzlich zum strong-Tag können Sie CSS verwenden, um dies zu erreichen, aber CSS hat keine Semantik. 🎜🎜Erweiterung: starkes Element, standardmäßig fett. Das starke Element stellt wichtige Inhalte dar, die nicht ignoriert werden können 🎜fett (Abkürzung 700)🎜🎜Fett🎜🎜🎜🎜100~900 (ganzzahlige Vielfache von 100)🎜🎜Je größer der Wert, desto fetter die Schriftart🎜🎜🎜🎜🎜

🎜Hinweis: Die CSS-Nummer 400 entspricht normal, und 700 usw. Der Preis ist fett gedruckt. Aber wir drücken es lieber in Zahlen aus. 🎜🎜🎜1.5 font-style Schriftstil

🎜Font kursiv, außer mit den Tags i und em Andernfalls können Sie CSS verwenden, um dies zu erreichen, aber CSS hat keine Semantik. 🎜🎜Erweiterung: Die durch das i-Element ausgedrückte Sprache: Bei diesem Text handelt es sich um einen speziellen Text, der normalerweise zur Darstellung eines Symbols verwendet wird 🎜🎜Schriftstil:🎜🎜normal🎜🎜Standardwert: Der Browser zeigt den Standardschriftstil an Schriftstil🎜 🎜🎜🎜

注：平时我们很少给文字加斜体，反而喜欢给斜体标签（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视频教程）

Das obige ist der detaillierte Inhalt von13 häufig verwendete CSS-Schriftartattribute, welche kennen Sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!