CSS 字体

CSS字体系列

CSS字体属性定义字体系列，粗体，大小和文本样式。在CSS中，有两种类型的字体系列名称：

generic family - 一组具有相似外观的字体系列（如“Serif”或“Monospace”）
font family - 特定的字体系列（如“Times New Roman”或“Arial”）

Generic family	Font family	描述
Serif	Times New Roman Georgia	Serif 字体在某些字符的末尾有小线条
Sans-serif	Arial Verdana	“Sans”的意思是没有 - 这些字体在字符的结束没有小线条
Monospace	Courier New Lucida Console	所有的单空间字符都具有相同的宽度

注意：在计算机屏幕上，sans-serif字体被认为比serif字体更容易阅读。

字体系列

font-family属性设置文本的字体系列。font-family属性应该包含多个字体名称作为“后备”系统。如果浏览器不支持第一种字体，它会尝试下一种字体，依此类推。从您想要的字体开始，以一般系列结束，让浏览器在通用系列中选择类似的字体，如果没有其他字体可用。注意：如果字体系列的名称不止一个字，则必须使用引号，例如：“Times New Roman”。在以逗号分隔的列表中指定了多个字体系列：

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

p.sansserif {
 font-family: Arial, Helvetica, sans-serif;
}

尝试一下

字体样式

font-style属性主要用于指定斜体文本。此属性有三个值：

normal - 文本正常显示
italic - 文本以斜体显示
oblique - 文本是“倾斜”（倾斜非常类似于斜体，但支持较少）

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 size单元。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的组合

适用于所有浏览器的解决方案是为<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.light {
         font-weight: lighter;
       }

       p.thick {
         font-weight: bold;
       }

       p.thicker {
         font-weight: 900;
       }

尝试一下

响应字体大小

可以使用vw单位设置文本大小，这意味着“视口宽度”。这样文本大小将遵循浏览器窗口的大小：

<h1 style="font-size:10vw;">响应文本</h1>

尝试一下

Viewport是浏览器窗口大小。1vw=视口宽度的1％。如果视口宽50厘米，则1vw为0.5厘米。

字体变体

font-variant属性指定文本是否应以小型大写字体显示。在小型大写字体中，所有小写字母都转换为大写字母。但是，转换后的大写字母显示的字体大小小于文本中的原始大写字母。

p.normal {
             font-variant: normal;
           }

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

尝试一下

所有CSS边框属性

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

CSS字体系列

字体系列

字体样式

字体大小

用像素设置字体大小

用Em设置字体大小

使用百分比和Em的组合

字体权重

响应字体大小

字体变体

所有CSS边框属性

相关页面