网页|CSS字体介绍

Posted 2021-04-09 算法与编程之美

除了上一节我们讲到的背景以外，字体也是一个我们最常用到的属性，接下来我们就来讲一讲CSS字体。

CSS字体(font)属性定义文本中的字体，我们将从以下几个方面进行介绍。

属性	描述
font	简写属性。在一个声明中设置所有字体属性
font-family	字体系列
font-size	字体尺寸
font-size/line-height	字体尺寸和行高
font-style	字体风格
font-weight	字体粗细

可以使用font-family属性定义文档采用的优先字体系列。

1. 通用字体系列

CSS定义了5种通用字体系列：

1. a)  Serif字体系列的字体成比例，而且有上下短线。成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如，小写i和小写m的宽度就不同。上下短线是每个字符笔划末端的装饰，比如大写A两条腿底部的短线。Serif字体系列包括Times、Georgia和NewCentury Schoolbook。

2. b)  Sans-serif字体系列的字体是成比例的，没有上下短线。包括Helvetica、Geneva、Verdana、Arial或Univers。

3. c)  Monospace字体系列的字体并不是成比例的，通常用于打印机输出。这些字体每个字符的宽度都必须完全相同，所以小写的i和小写的m有相同的宽度。包括Courier、Courier New和Andale Mono。

4. d)  Cursive字体系列的字体模仿人的手写体，包括ZapfChancery、Author和Comic Sans。

5. e)  Fantasy字体系列的字体无法用任何特征来定义，包括Western、Woodblock和Klingon。

6. 2. 指定字体系列

7. a)  除了通用字体系列，还可以设置更具体的字体。如文档所有元素使用“微软雅黑”字体：

body{font-family:微软雅黑;}

1. b)  指定字体会产生一个问题，如果用户没有安装这种字体，就只能使用默认字体来显示。可以通过指定字体和通用字体系列相结合来解决这个问题，如：

body{font-family:微软雅黑,sans-serif;}

1. c)  如果用户没有安装“微软雅黑”，但安装了Times字体（serif系列），元素会使用Times。

p{ background-color: gray;}

3. 字体大小

font-size属性设置元素的字体大小，实际上它设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮（通常矮）

值	描述
xx-small、x-small、small medium、 large、x-large、xx-large	把字体的尺寸设置为从xx-small到xx-large 默认值：medium
smaller	设置为比父元素更小的尺寸
larger	为比父元素更大的尺寸
length	设置为一个固定的值
%	设置为基于父元素的一个百分比值

4.字体风格

font-style属性定义字体的风格。

值	描述
normal	默认值。标准字体样式
Italic	斜体
oblique	倾斜

如为段落设置不同的字体风格：

p.italic{font-style:italic;} p.oblique{font-style:oblique;}

5.字体粗细

值	描述
normal	默认值。标准字符
bold	粗体
bolder	更粗
lighter	更细
100、200、300、400、500、600、700、800、900	定义由粗到细的字符。400=normal，700= bold

6. CSS3服务器端字体

在CSS3之前，Web设计师必须使用已在用户计算机上安装好的字体。现在通过CSS3 @font-face，Web设计师可以使用他们喜欢的任意字体，并将该字体文件存放到Web服务器上，用户在访问页面时，字体会在需要时被自动下载到用户的计算机上。@font-face规则中定义的描述符。

描述符	值	描述
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	ormal、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"

如果使用服务器端字体，必须首先在@font-face规则中定义字体的名称和位置，然后在html元素中通过font-family来引用服务器端字体。

END

主  编   |   张祯悦

责  编   |   杨金月

 where2go 团队

---

   

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！