CSS可以选择字体系列，设置字体大小，控制字体重量，并添加字体样式。
Font Family
font-family属性按照首选项的顺序指定字体。浏览器以第一个字体开始，并使用可用的字体。
CSS定义了一些可用的通用字体。浏览器用于呈现它们的确切字体可以有变化。通用字体系列的摘要可以在下表中找到。
| 通用字体 | 示例实现字体 |
| serif | Times |
| sans-serif | Helvetica |
| cursive | Zapf-Chancery |
| fantasy | Western |
| monospace | Courier |
以下代码显示应用于文本块的font-family属性。
p {
font-family: "HelveticaNeue Condensed", monospace;
}如果HelveticaNeue Condensed在您的系统中不可用，则使用通用等宽。
font-size
font-size属性设置字体的大小。此属性的允许值在以下列表中描述。
- xx-small
x-small
small
medium
large
x-large
xx-large
设置字体大小。浏览器负责决定每个值表示的确切大小。 - smaller
larger
相对于父元素的字体大小设置字体大小。 - length
使用CSS长度值精确设置字体大小。 - %
将字体大小设置为父元素的字体大小的百分比。
以下代码显示了font-size属性。
<html>
<head>
<style type="text/css">
p.absoluteone {
font-size: xx-small;
}
p.absolutetwo {
font-size: x-small;
}
p.absolutethree {
font-size: small;
}
p.absolutefour {
font-size: medium;
}
p.absolutefive {
font-size: large;
}
p.absolutesix {
font-size: x-large;
}
p.absoluteseven {
font-size: xx-large;
}
p.pixelsone {
font-size: 9px;
}
p.pixelstwo {
font-size: 12px;
}
p.pixelsthree {
font-size: 14px;
}
p.pixelsfour {
font-size: 18px;
}
p.pixelsfive {
font-size: 24px;
}
p.pixelssix {
font-size: 36px;
}
p.pixelsseven {
font-size: 48px;
}
p.picaone {
font-size: 1pc;
}
p.picatwo {
font-size: 2pc;
}
p.picathree {
font-size: 3pc;
}
p.picafour {
font-size: 4pc;
}
p.pointone {
font-size: 9pt;
}
p.pointtwo {
font-size: 12pt;
}
p.pointthree {
font-size: 14pt;
}
p.pointfour {
font-size: 18pt;
}
p.pointfive {
font-size: 24pt;
}
p.pointsix {
font-size: 36pt;
}
p.pointseven {
font-size: 48pt;
}
p.relativeone {
font-size: smaller;
}
p.relativetwo {
}
p.relative {
font-size: larger;
}
p.emone {
font-size: 1em;
}
p.emtwo {
font-size: 2em;
}
p.emthree {
font-size: 3em;
}
p.emfour {
font-size: 4em;
}
p.exone {
font-size: 1ex;
}
p.extwo {
font-size: 2ex;
}
p.exthree {
font-size: 3ex;
}
p.exfour {
font-size: 4ex;
}
p.exfive {
font-size: 5ex;
}
p.exsix {
font-size: 6ex;
}
p.exseven {
font-size: 7ex;
}
p.percentone {
font-size: 50%;
}
p.percenttwo {
font-size: 75%;
}
p.percentthree {
font-size: 100%;
}
p.percentfour {
font-size: 150%;
}
p.percentfive {
font-size: 200%;
}
p.percentsix {
font-size: 400%;
}
</style>
</head>
<body>
<div class="page">
<h1>Font Sizes</h1>
<div class="column">
<h2>Absolute</h2>
<p class="absoluteone">xx-small</p>
<p class="absolutetwo">x-small</p>
<p class="absolutethree">small</p>
<p class="absolutefour">medium</p>
<p class="absolutefive">large</p>
<p class="absolutesix">large</p>
<p class="absoluteseven">large</p>
</div>
<div class="column">
<h2>Pixels</h2>
<p class="pixelsone">9 px</p>
<p class="pixelstwo">12 px</p>
<p class="pixelsthree">14 px</p>
<p class="pixelsfour">18 px</p>
<p class="pixelsfive">24 px</p>
<p class="pixelssix">36 px</p>
<p class="pixelsseven">48 px</p>
</div>
<div class="column">
<h2>Points</h2>
<p class="pointone">9 pt</p>
<p class="pointtwo">12 pt</p>
<p class="pointthree">14 pt</p>
<p class="pointfour">18 pt</p>
<p class="pointfive">24 pt</p>
<p class="pointsix">36 pt</p>
<p class="pointseven">48 pt</p>
</div>
<div class="column">
<h2>Picas</h2>
<p class="picaone">1 pc</p>
<p class="picatwo">2 pc</p>
<p class="picathree">3 pc</p>
<p class="picafour">4 pc</p>
</div>
<hr />
<div class="column">
<h2>Relative Sizes</h2>
<p class="relativeone">smaller</p>
<p class="relativetwo">no style</p>
<p class="relativethree">larger</p>
</div>
<div class="column">
<h2>Ems</h2>
<p class="emone">1em</p>
<p class="emtwo">2em</p>
<p class="emthree">3em</p>
<p class="emfour">4em</p>
</div>
<div class="column">
<h2>Exs</h2>
<p class="exone">1ex</p>
<p class="extwo">2ex</p>
<p class="exthree">3ex</p>
<p class="exfour">4ex</p>
<p class="exfive">5ex</p>
<p class="exsix">6ex</p>
<p class="exseven">7ex</p>
</div>
<div class="column">
<h2>Percents</h2>
<p class="percentone">50%</p>
<p class="percenttwo">75%</p>
<p class="percentthree">100%</p>
<p class="percentfour">150%</p>
<p class="percentfive">200%</p>
<p class="percentsix">400%</p>
</div>
</diV>
</body>
</html>font-weight
您可以使用font-weight属性设置字体的权重。其可能的值为：
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
以下代码使用font-weight和font-style属性。
<!DOCTYPE HTML>
<html>
<head>
<style>
p.one {
font-weight: normal;
}
p.two {
font-weight: bold;
}
p.three {
font-weight: normal;
}
p.three span {
font-weight: bolder;
}
p.four {
font-weight: bold;
}
p.four span {
font-weight: lighter;
}
p.five {
font-weight: 100;
}
p.six {
font-weight: 200;
}
p.seven {
font-weight: 300;
}
p.eight {
font-weight: 400;
}
p.nine {
font-weight: 500;
}
p.ten {
font-weight: 600;
}
p.eleven {
font-weight: 700;
}
p.twelve {
font-weight: 800;
}
p.thirteen {
font-weight: 900;
}
.column {
width: 150px;
float: left;
margin-right: 30px;
}
</style>
</head>
<body>
<h1>Font Weight</h1>
<div class="column">
<p class="one">normal</p>
<p class="two">bold</p>
<p class="three">
<span>bolder</span>.
</p>
<p class="four">
<span>lighter</span>.
</p>
</div>
<div class="column">
<p class="five">100</p>
<p class="six">200</p>
<p class="seven">300</p>
<p class="eight">400</p>
<p class="nine">500</p>
<p class="ten">600</p>
<p class="eleven">700</p>
<p class="twelve">800</p>
<p class="thirteen">900</p>
</div>
</body>
</html>font-style
font-style属性选择normal，italic和oblique字体。
斜体字体和斜体字体之间有区别，但是区别对文本的外观没有什么区别。
以下代码使用font-weight和font-style属性。
p.one {
font-style: normal;
}
p.two {
font-style: italic;
}
p.three {
font-style: oblique;
}<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p.one {
font-style: normal;
}
p.two {
font-style: italic;
}
p.three {
font-style: oblique;
}
</style>
</head>
<body>
<p class="one">This is a normal font</p>
<p class="two">This is an italic font</p>
<p class="three">This is an oblique font</p>
</body>
</html>相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| @font-face | 从web加载字体 | 3 |
| font-family | 设置文本的字体系列 | 1 |
| font-size-adjust | 设置在发生字体回退时文本的可读性 | 3 |
| font-size | 设置文本的字体大小 | 1 |
| font-stretch | 为字体系列选择正常，浓缩或展开的面 | 3 |
| font-style | 设置文本的字体样式 | 1 |
| font-variant | 设置为使用小写字体 | 1 |
| font-weight | 设置字体的粗细 | 1 |
| font | 字体的简写属性 | 1 |