|
字体 (font) 属性定义文本中的字体。
设置字体属性是样式表的最常见用途之一。 字体属性答应您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。
指定字体
可以使用 font-family 属性在文档中采用某种字体系列。
使用通用字体系列
假如你但愿文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
[pre]body {font-family: sans-serif;}[/pre]
这样用户代办代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。由于有继续，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其笼盖。
指定字体系列
除了指定通用的字体系列，您还可以通过 font-family 属性设置更详细的字体。
下面的例子为所有 h1 元素设置了 Verdana 字体：
[pre]h1 {font-family: Georgia;}[/pre]
这样的规则同时会产生另外一个题目，假如用户代办代理上没有安装 Georgia 字体，就只能使用用户代办代理的默认字体来显示 h1 元素。
我们可以通过结合特定字体名和通用字体系列来解决这个题目：
[pre]h1 {font-family: Georgia, serif;}[/pre]
假如读者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），用户代办代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。
因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代办代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。
假如您对字体非常认识，也可认为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：
[pre]p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}
[/pre]
根据这个列表，用户代办代理会按所列的顺序查找这些字体。假如列出的所有字体都不可用，就会简朴地选择一种可用的 serif 字体。
使用引号
您也许已经留意到了，上面的例子中使用了单引号。只有当一个字体名中有一个或多个空格（好比 New York），或者假如字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是，假如把一个 font-family 属性放在 的 style 属性中，则需要使用该属性本身未使用的那种引号。
字体实例：
设置文本的字体
本例演示如何设置文本字体。
<>
<head>
<style type="text/">
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
</style>
</head>
<body>
<h1> 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>
</>
设置字体尺寸
本例演示如何设置字体尺寸。
<>
<head>
<style type="text/">
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>
</>
设置字体风格
本例演示如何设置字体风格。
<>
<head>
<style type="text/">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style blique}
</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>
</>
设置字体的异体
本例演示如何设置字体的异体。
<>
<head>
<style type="text/">
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>
</>
设置字体的粗细
本例演示如何设置字体的粗细。
<>
<head>
<style type="text/">
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>
</>
所有字体属性在一个声明之内
本例演示如何使用简写属性将字体属性设置在一个声明之内。
<>
<head>
<style type="text/">
p.ex1
{
font:italic arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}
</style>
</head>
<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>
</>
字体属性
| 属性 | 描述 | | font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 | | font-family | 设置字体系列。 | | font-size | 设置字体的尺寸。 | | font-size-adjust | 当首选字体不可用时，对替代字体进行智能缩放。（css2.1 已删除该属性。） | | font-stretch | 对字体进行水平拉伸。（css2.1 已删除该属性。） | | font-style | 设置字体风格。 | | font-variant | 以小型大写字体或者正常字体显示文本。 | | font-weight | 设置字体的粗细。 |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2011-7-29 21:08:09
发表于 2011-7-29 21:41:47