CSS 字体

CSS 字体属性允许你为字体设置各种样式,如文本的字体系列,大小和粗体,变体等。

字体属性

在 CSS 样式为文本内容的字体提供多种特性,如: font-familyfont-stylefont-variantfont-weightfont-size 。以下部分将逐一介绍这些属性中的每一个。

字体系列

font-family CSS 属性允许你设置字体系列名称和/或通用姓氏的优先级列表所选元素的文本内容。

font-family 属性可以包含多个字体名称作为后备系统。列出你想要的字体,然后列出第一个可能填写的字体(如果它不可用)。你应该用通用的五个字体系列来结束名单- , serifsans-serifmonospacecursivefantasy。字体系列声明可能如下所示:

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

注意: 如果字体家族的名称超过一个单词,它必须用引号引起来,像 Times New RomanCourier NewTrebuchet MS 等等。

要了解有关常用字体组合的更多信息; 请查看网页安全字体

字体样式

font-style 属性设置元素的文本内容的字体样式。

此属性的可能值为: normalitalicoblique

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

注意: 乍一看,倾斜和斜体样式看起来都是一样的,但是有区别。italic 样式使用斜体版本的字体,而另一方面,oblique 文本只是普通字体的倾斜版本

字体大小

font-size 属性设置元素的文本内容的字体大小。

有几种方法可以指定字体大小值,例如关键字,像素或 ems。

用关键字设置字体大小

通过在 body 元素上设置关键字字体大小,你可以在页面上的其他位置设置相对字体大小,使你能够相应地在整个页面上轻松地向上或向下缩放字体。字体绝对大小使用以下关键字之一指定 xx-smallx-smallsmallmediumlargex-largexx-large

使用以下关键字之一指定相对大小: smallerlarger

用像素设置字体大小

当你需要像素精度时,以像素值(例如 12px,16px 等)设置字体大小是一个不错的选择。但是,结果可能会在浏览器中有所不同,因为它们使用不同的算法来实现类似的效果。

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

以像素定义字体大小不是很容易访问,因为用户无法从浏览器设置更改字体大小。例如,视力有限的用户可能希望将字体大小设置为大于你指定的大小。因此,如果要创建包容性设计,则应避免使用字体大小的像素值。

提示: 可以使用缩放工具在所有浏览器中调整文本大小。但是,此功能会调整整个页面的大小,而不仅仅是文本。

Em 设置字体大小

em 单元是指父元素的字体大小。

em 值的大小是动态的。定义 font-size 属性时,em 等于应用于元素父级的字体大小。

如果你 font-size 在 body 元素上设置了 20px,那么 1em = 20px2em = 40px

如果你没有在页面上的任何位置设置字体大小,那么它是浏览器默认值,可能是 16px。所以,默认情况下 1em = 16px ,和 2em = 32px

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

警告: IE6 和 IE7 不接受夸大调整太大和太小的文本的。(在发布前测试)。

使用百分比和 Em 的组合

在所有浏览器中实现类似效果的解决方案是 font-sizebody 元素设置默认百分比。一种流行的技术是将 bodyfont-size 设置为 62.5% (默认 16px62.5%),相当于 10px0.625em

现在,你可以使用 em 单位为任何元素设置 font-size,用一些具有易于记忆的转换,比如 px 除以 10。值通过这样子如 10px = 1em12px = 1.2em14px = 1.4em16px = 1.6em 等。请参阅以下示例:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

提示:万维网联盟(W3C) 中建议使用 EM 或百分比(%)值,以创造更强大的,可扩展的布局。

字体重量

font-weight 属性指定字体的粗细或粗体。

font-style 属性的可能值是: normalboldbolderlighter100200300400500600700800900inherit

  • 数值 100 - 900 指定字体粗细,其中每个数字代表比其前身更深的权重。 400normal 是相同的, 700bold 是相同的。
  • bolderlighter ,是相对于继承字体的粗细,而其他的值是绝对字体权值。
p {
    font-weight: bold;
}

由于大多数字体仅以有限数量的权重提供; 通常它们只能以正常粗体显示。如果字体在指定的重量中不可用,则将选择最接近的可用重量的替代品。

字体变体

font-variant 属性允许文本以特殊的小型大写字母变体显示。

小型大写字母跟正常的大写字母略有不同,其中它的小写字母看起来跟相对应的大写字母的较小的形式相同。

font-variant 属性的可能值是 normalsmall-capsinherit

p {
    font-variant: small-caps;
}