通过

“样式生成器”对话框 ->“字体”

  • 项目

更新：2007 年 11 月

“样式生成器”对话框的“字体”页使您能够定义级联样式表 (CSS) 字体属性。可以直接将这些属性应用到 HTML 元素或者将其添加到 CSS 样式规则中。

将字体属性直接应用到页面上 HTML 元素中的文本

  1. 在 HTML 设计器的“设计”视图中打开 HTML 文档，然后选择要格式化的文本。

  2. 单击“格式”菜单上的“样式”，以打开“样式生成器”对话框。

  3. 在“样式生成器”对话框的左窗格中选择“字体”。

    右窗格中将出现“样式生成器 - 字体”对话框。

在将字体样式应用到“设计”视图中选定的文本时，样式属性内联插入到该页的 HTML 标记中。切换到“HTML”视图以检查插入的新样式属性。

将字体属性添加到在外部样式表中定义的 CSS 样式规则中

  1. 打开一个现有外部样式表，然后将插入点放在所需样式的选择器后面的大括号 ({ }) 中。

  2. 单击“样式”菜单上的“生成样式”，以打开“样式生成器”对话框。

  3. 在“样式生成器”对话框的左窗格中单击“字体”。

    右窗格中将出现“样式生成器 - 字体”对话框。

说明：

当您打开外部 CSS 样式表进行编辑时，将出现“样式”菜单。将插入点置于样式规则选择器后的大括号内时，“样式”菜单上的“生成样式”选项即变为可用。

外部样式表中定义的 CSS 样式类可以应用到网页中 <BODY> 元素内的元素（或者，在这种情况下，直接应用到 <BODY> 元素本身），方法是将该 CSS 样式选择器分配给该元素的 CLASS 属性。

“生成样式”对话框的“字体”页上包括的可用选项如下。

任务

用户界面元素

字体名称

  • Family
    提供一组字体选项，以便用于以该样式显示的文本。如果正在设计用于 Internet 的文档，请选择多数用户会有的字体。不同的 Internet 观众可能不会都安装很多种字体。如果选择“族”，可以选择旁边的省略号按钮 (...) 打开“字体选择器”对话框，然后选择字体。有关更多信息，请参见“字体选择器”对话框。通用的做法是列出多个字体以提供一组选项。例如，您可从“字体选择器”中选择“Verdana”（这是一种为 Web 显示而设计的 Windows 系统字体），然后手动添加“Arial”、“Helvetica”（这两种字体用于 Macintosh 浏览器）和“Sans-Serif”（作为以下用户的一般字体选项，这些用户不具有列出的任何一种字体）。FONT-FAMILY 的 CSS 样式标记可能为：

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

  • 系统字体
    选择该选项使样式应用用户在查看该页的计算机上所定义的一种系统字体选项。例如，如果选择“窗口标题”，查看者的 Web 浏览器将使用在查看计算机上分配给“窗口标题”的字体，显示在您的页面中设置为此样式的文本。该“窗口标题”字体可能在一台计算机上为“Times”，而在另一台计算机上为“Verdana”。例如，应用“窗口标题”系统字体的 CSS 样式标记为：

    FONT: caption

字体属性

  • 颜色
    设置以该样式显示的文本的颜色。指定颜色的方法有以下几种：

    • 键入颜色名称。

    • 键入有效的 RGB 颜色值（例如：#FF0000 为红色）。

    • 从下拉列表中选择一个选项。

    • 单击省略号按钮 (...) 打开“颜色选取器”对话框，然后选择其他颜色。

    例如，如果选择红色，将插入下面的 CSS 属性/值对：

    COLOR: red

    说明：

    如果您从“颜色选取器”而不是从下拉列表中选择颜色，将插入十六进制的 RGB 颜色值而非颜色名称。例如，如果从“颜色选取器”对话框中选择红色，则将插入以下 CSS 属性/值对：COLOR: #ff0000。

  • 斜体
    为以此样式显示的文本设置 FONT-STYLE 属性。选择“<未设置>”（未选择任何选项）、“正常”（非倾斜）或“斜体”。例如，如果选择“斜体”，将插入下面的 CSS 属性/值对：

    FONT-STYLE: italic

    说明：

    当该属性为“<未设置>”时，不会向样式中添加任何代码。系统字体无法应用 Italics 属性。

  • 小型大写字母
    为以此样式显示的文本设置 FONT-VARIANT属性。选择“<未设置>”（未选择任何选项）、“正常”（非小型大写字母）或“小型大写字母”。例如，如果选择“小型大写字母”，则插入以下 CSS 标记：

    FONT-VARIANT: small-caps

    说明：

    Small Caps 属性无法应用到系统字体。当该属性为“<未设置>”时，不会向样式中添加任何代码。

大小

此选项使用以下三个属性之一设置样式的字体大小：Specific、Absolute 或 Relative。

说明：

当该属性为“<未设置>”时，不会向样式中添加任何代码。Size 属性无法应用到系统字体。

  • 特定
    设置字体的具体大小。相邻的下拉列表显示单位选项，包括 px、pt（默认值）、pc、mm、cm、in、em、ex 和 %。例如，如果键入 20，然后接受默认单位选项，就会插入以下 CSS 标记：

    FONT-SIZE: 20pt

    说明：

    当该属性为“<未设置>”时，不会向样式中添加任何代码。请勿使用像素 (px) 度量单位，因为以像素为单位格式化的文本在打印时的大小比显示的大小要小得多。

  • 绝对
    设置字体的绝对大小，可从选项列表中进行选择。选择“<未设置>”（没有指定值）、“XX-Small”、“X-Small”、“Small”、“Medium”、“Large”、“X-Large”或“XX-Large”。例如，如果选择“X-Small”，则插入以下 CSS 标记：

    FONT-SIZE: x-small

    说明：

    当该属性为“<未设置>”时，不会向样式中添加任何代码。

  • 相对
    设置字体的相对大小，可从选项列表中进行选择。该大小与级联式样式中的父级相关。例如，如果 <BODY> 元素文本是 8 pt，并且将 <BODY> 元素的 <SPAN> 元素中文本的样式设置为“较小”，则 <SPAN> 文本小于 8 pt。选择“<未设置>”（没有指定值）、“较小”或“较大”。例如，如果选择“较大”，则将插入以下 CSS 标记：

    FONT-SIZE: larger

    说明：

    当该属性为“<未设置>”时，不会向样式中添加任何代码。

效果

此选项为样式设置预定义效果。以下复选框可用：“无”（无效果）、“下划线”、“删除线”和“上划线”。

如果选择“无”，则没有效果可用。如果未选择“无”，则可以选择其余效果的任意组合。例如，如果同时选择“下划线”和“删除线”，则将插入以下 CSS 标记：

TEXT-DECORATION: underline line-through

粗体

此选项将根据绝对值或相对值来设置 FONT-WEIGHT 属性。

  • 绝对
    将样式的绝对粗体属性设置为与该字体相关联的粗体属性。选择“<未设置>”（未选择任何选项）、“正常”（非粗体）或“粗体”。例如，如果选择“粗体”，则插入以下 CSS 标记：

    FONT-WEIGHT: bold

    说明：

    Absolute Bold 属性和 Relative Bold 属性无法应用到系统字体。

  • 相对
    将样式的相对粗体属性设置为某个粗体属性，该粗体属性比字体的默认粗体值粗或细。选择“<未设置>”（未选择任何选项）、“较淡”（比默认粗体细）或“较深”（比默认粗体粗）。由于 Lighter 属性和 Bolder 属性都与单个字体相关，所以粗细程度因应用这些属性的字体而异。例如，如果选择“较深”，则将插入以下 CSS 标记：

    FONT-WEIGHT: bolder

大写

设置样式的 TEXT-TRANSFORM 属性。选择“<未设置>”（未选择任何选项）、“无”（按输入时的大小写）、“首字母大写”、“小写”或“大写”。例如，如果选择“大写”，则将添加下列代码：

TEXT-TRANSFORM: uppercase

说明：

当该属性为“<未设置>”时，不会向样式中添加任何代码。

请参见

概念

使用 CSS 概述

参考

“样式生成器”对话框 ->“文本”

“样式生成器”对话框 ->“背景”

“颜色选择器”对话框

“字体选择器”对话框