CSS字体

CSS字体属性定义字体家族，粗细，大小，和文本的样式。

Serif 和 Sans-serif 字体的区别

Serif vs. Sans-serif

CSS 字体

在CSS里面, 有两个类型的字体家族:

  • 通称族 - 一组具有相似外观的字体族 (像 "Serif" 或者 "Monospace")
  • 字形体系 - 一个特定的字体族 (像 "Times New Roman" 或者 "Arial")
通称族 字形体系 描述
Serif Times New Roman
Georgia		 衬线字体,一些字符两端有小的线
Sans-serif Arial
Verdana		 "Sans" 是指没有-这些字体没有在文字两端的线
Monospace Courier New
Lucida Console		 所有字符宽度相同

注意：在计算机屏幕上，无衬线字体，被认为是比衬线字体容易阅读。

字形体系

文本的字体系列使用 font-family 属性设置.

font-family 属性应将几个字体名称作为 "fallback" 系统. 如果浏览器不支持第一个字体，它尝试下一个字体，等等。

从你想要的字体开始，用一个通用的家庭结束，让浏览器在泛型家庭中选择一个类似的字体，如果没有其他字体可用的话。

注意：如果一个字体家族的名字超过一个单词，它必须是引号, 像: "Times New Roman".

在逗号分隔列表中指定多个字体家族.:

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

让我试试

字形

font-style 属性是用来指定斜体。

此属性有三个值:

  • normal - 文本显示正常
  • italic - 他文本以斜体显示
  • oblique - 文本是“倾斜”的 (oblique 和 italic非常相似, 但支持的很少)
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

让我试试

字体大小

font-size 属性设置文本的大小。

能够管理文本大小在网页设计中很重要。但是，您不应该使用字体大小调整，使段落看起来像标题，或标题看起来像段落。

总是使用正确的HTML标签, 像 <h1> - <h6> 是标题 ，<p> 是段落。

font-size 值可以是绝对值，也可以是相对大小。

绝对大小:

  • 将文本设置为指定的大小
  • 不允许用户在所有浏览器中更改文本大小.
  • 绝对大小是有用的，当输出的物理尺寸是已知的

相对大小:

  • 设置相对于周围元素的大小
  • 允许用户更改浏览器中的文本大小.

注意：如果你没有指定字体大小，默认大小为浏览器的正常文本，如段落, 是16px (16px=1em).

用像素设置字体大小

使用像素设置文本大小使您完全控制文本大小：

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

让我试试

提示：如果使用像素，仍然可以使用缩放工具调整整页的大小.。

用Em设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用EM而不是像素。

W3C 推荐使用em大小.

1em 等于当前的字体大小. 浏览器中的默认文本大小为 16px. 因此，对1em默认大小 16px.

使用这个公式可以计算从像素到EM的转换: pixels/16=em

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

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

让我试试

在上面的示例中，EM中的文本大小与前一个示例的像素相同。然而，使用EM的大小，它是可以调整文本大小在所有浏览器。

不幸的是，仍然有一个问题与旧版本的IE浏览器，文本变得大于它应该什么时候做得更大，小的比要小。

混合使用Em和百分比

在所有浏览器中工作的解决方案, 使用百分比，设置默认 font-size 在 <body> 元素中:

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

让我试试

我们的代码现在工作的非常好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！

字体权重

font-weight属性指定字体的权重:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

让我试试

字体变形

font-variant 属性指定是否应以小大写字体显示文本..

使用 small-caps 字体, 所有的小写字母转换为大写字母. 然而，转换后的大写字母呈现一个较小的字体大小比原来的大写字母的文本。

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

让我试试

所有的CSS字体属性

属性 描述
font 在一个声明中设置所有字体属性.
font-family 指定文本的字体族
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 指定是否应在小大写字体中显示文本.
font-weight 指定字体的权重