Visit Mozilla.org

CSS:Getting Started:Text styles

From MDC


本页中给出更多的文本风格示例。 并修改示例样式表,尝试不同的字体。

[编辑] 信息: 文本风格

CSS 拥有多种文本风格的属性。 有一种方便的速记属性, font, 你可以用它一次来指定多个属性—例如:

  • 粗体, 斜体, 和 small-caps (小的大写字母)
  • 尺寸
  • 行高
  • 字体
示例
p {font: italic 75%/125% "Comic Sans MS", cursive;}

上述规则指定了不同的字体属性,并将所有段落设定为斜体。 字体大小设定为每个段落父元素大小的四分之三, 行高设定为 125% (比正常值略大).

字体设定为 Comic Sans MS,但如果这个字体不可用,浏览器会使用它默认的 cursive (手写) 字体.

此规则的副作用是关闭了粗体和小型大写字母 (设置它们为 正常):

[编辑] 字体

我们无法预知文档读者拥有什么字体。 因此当指定字体的时候,给出一系列可选的字体是一个不错的做法。

在列表的结尾给出一个内置的默认字体: serif, sans-serif, cursive, fantasymonospace. (这中的一些符合你浏览器选项中的设定.)

如果字体不支持文档中的一些特征,那么浏览器可以替代一个不同的字体。举例来说,文档也许会包含字体不支持的特殊字符。如果浏览器可以找到另一个字体包含这些字符,那么它将会使用那个字体。

去指定一个它自己的字体,使用 font-family 属性.


[编辑] 字体大小

读者使用Mozilla浏览器可以在选项中设定默认字体大小并且当他们阅读网页的时候改变字体大小,因此,它给你了一个很好的提示去尽量使用相关大小。

你可以使用一些字体大小内置的值, 像 small, mediumlarge. 你可以使用这些值关联双亲元素字体大小, 像: smaller, larger, 150%1.5.

如果必要你可以指定实际大小, 如: 12px (12个像素) 给显示设备或12pt (12 点) 给打印机. 这个大小名以上是字母m的宽度, 但是字体会在你看到的大小和你指定的大小变化.

去指定一个字体的大小, 使用 font-size 属性.

[编辑] 行高

行高指定了行与行之间的距离。如果你的文档有很长的段落和很多行,一个比正常值更大的行间距可以使阅读更容易,尤其当字体的尺寸很小时。

指定行高, 使用 line-height 属性。

[编辑] 修饰

分离的 text-decoration 属性 可以指定其它风格, 如underlineline-through. 你可以设置它为 none 来明显的移除任何装饰。

[编辑] 其它属性

指定斜体, 使用 font-style: italic;
指定粗体, 使用 font-weight: bold;
指定小大写字母, 使用 font-variant: small-caps;

独立的关闭任何属性, 你可以指定值 normal 或者 inherit.

更多资料
你可以用不同的方法指定文本风格。

例如, 这里提及的属性还有其它值供你使用。

在复杂的样式表中,避免使用简写的font 属性,因为它有副作用(会重置其它独立属性)。

完整的字体属性细节, 参阅Fonts 的CSS说明。 完整的文本修饰细节, 参见Text部分。

[编辑] 实践: 指定字体

对于一个简单的文档,你可以在BODY元素中设置字体,文档的其余部分会继承这个设定。

编辑你的 CSS 文件.添加如下规则改变所有的字体。CSS文件的最前面是逻辑上放置此规则的最好位置,但实际上,你把它放到CSS文件的任何位置都可以得到同样的效果:

body {font: 16px "Comic Sans MS", cursive;}

为这条规则添加一个注释,并为它添加空白,让它排成你喜欢的版式。

刷新浏览器查看效果。 如果你的系统有 Comic Sans MS, 或者另外的 cursive 字体不支持斜体, 那么你的浏览器会在第一条线选择一个不同的字体来显示斜体文本:

Cascading Style Sheets
Cascading Style Sheets


从你的浏览器的菜单栏, 选择 查看 – 字体大小 – 增加. 即使你将风格指定为16像素,阅读这个文档的用户也能改变此大小。

挑战
什么也不改变, 使全部六个首字母两倍大小浏览器的默认serif字体:
Cascading Style Sheets
Cascading Style Sheets


[编辑] 接下来的内容是什么?

你的示例文档已经使用了一些命名的颜色。在一页给出了标准颜色的列表和解释了你如何指定其它: color