当前位置

首页 > 字体知识 >

CSS 字体

时间: 2021-02-04 16:58
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

基本信息
中文名
CSS 字体

字体风格
font-style 属性最常用斜体文本


字体系列名称
通用字体系列

使用引号
单引号或双引号都可以接受

目录
1CSS 字体系列
2指定字体系列
3使用引号
4字体风格
折叠编辑本段CSS字体系列
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

在 CSS 中,有两种不同类型的字体系列名称:

通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")

特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

Serif 字体

Sans-serif 字体

Monospace 字体

Cursive 字体

Fantasy 字体

如果需要了解更多有关字体系列的知识,请阅读 CSS 字体系列。

折叠编辑本段指定字体系列
使用 font-family 属性 定义文本的字体系列。

使用通用字体系列

如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:

body {font-family: sans-serif;}

这样用户代理就会从 sans-serif 字体系列中选择一个字体(如 Helvetica),并将其应用到 body 元素。因为有继承,这种字体选择还将应用到 body 元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。

指定字体系列

除了使用通用的字体系列,您还可以通过 font-family 属性设置更具体的字体。

下面的例子为所有 h1 元素设置了 Georgia 字体:

h1 {font-family: Georgia;}

这样的规则同时会产生另外一个问题,如果用户代理上没有安装 Georgia 字体,就只能使用用户代理的默认字体来显示 h1 元素。

我们可以通过结合特定字体名和通用字体系列来解决这个问题:

h1 {font-family: Georgia, serif;}

如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的一种字体),用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配,但至少足够接近。

因此,我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。

如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:

p {font-family: Times, TimesNR, 'New Century Schoolbook',

Georgia, 'New York', serif;}

根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。

折叠编辑本段使用引号
您也许已经注意到了,上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。

单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,

'New York', serif;">...</p>

亲自试一试

折叠编辑本段字体风格
ont-style 属性最常用于规定斜体文本。

该属性有三个值:

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

实例

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}
上一篇:衬线字体 下一篇:燕书字体

本页标题:CSS 字体

本页地址:http://dullr.com/ziti/ziti/zitizhishi/208.html

转载请以链接标题或地址的形式注明出处,谢谢!本站部分文章转自网络整理,如有侵犯您的版权信息,请联系我们删除!