CSS 字体(font)实例

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>
posted @ 2018-11-16 09:58  Mr.zou  阅读(1304)  评论(0编辑  收藏  举报