CSS 字体(font)实例
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
CSS 字体系列
在 CSS 中，有两种不同类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
CSS 字体属性
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
######
family-name
generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。
默认值：取决于浏览器。
inherit 规定应该从父元素继承字体系列。
值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
1.设置文本的字体
本例演示如何设置文本字体。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p.serif{font-family:"Times NEW Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph,shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
2.设置字体尺寸
本例演示如何设置字体尺寸。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
3.设置字体风格
本例演示如何设置字体风格。
<style type="text/css">
p.normal {font-style: normal}
p.italic {
font-style: italic;}
p.oblique {
font-style:oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">THis is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
4.设置字体的异体
本例演示如何设置字体的异体。
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
5.设置字体的粗细
本例演示如何设置字体的粗细。
<style type="text/css">
p.normal {font-weight:normal}
p.thick {font-weight: bold}
p.thicker {font-weight:900}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
<p class="thicker">This is a paragraph</p>
</body>
6.所有字体属性在一个声明之内
本例演示如何使用简写属性将字体属性设置在一个声明之内。
<style type="text/css">
p.ex1{font: italic arial,sans-serif;}
p.ex2{font:italic bold 12px/30px arial,sans-serif;}
</style>
</head>
<body>
<p class="ex1">is a paragraph. This is a paragraph. This is a paragraph. </p>
<p class="ex2"> is a paragraph. This is a paragraph.</p>
</body>