CSS样式-字体

浏览数：34 / 时间：2015年06月09日

CSS字体属性定义文本的字体系列：大小，加粗，斜体和大小写等。

在CSS中，有两种不同类型的字体系列名称：

　　通用字体：拥有相似外观的字体系统组合（Serif,Sans-serif,Monospace,Cursive,Fantasy）

　　特定字体：具体的字体系列（Times,TimesNR,Courier,Georgia）

1）指定字体系列　　font-family

<!--  如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明  -->
<!--  这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。  -->
body {font-family: sans-serif;}
<!--  除了使用通用的字体系列，您还可以通过 font-family 属性设置更具体的字体  -->
h1 {font-family: Georgia;}
<!--  
这样的规则同时会产生另外一个问题，如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。
我们可以通过结合特定字体名和通用字体系列来解决这个问题
  -->
h1 {font-family: Georgia, serif;}
<!--  
因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。
  -->

下面是一个完整的例子：

<html>
<head>
<style type="text/css">
h1 {font-family:Georgia, serif;}
p {font-family: Times, TimesNR, ‘New Century Schoolbook‘, Georgia, ‘New York‘, serif;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

2）字体风格　　font-style

font-style有三个属性值：normal,italic,oblique.分别为正常、斜体、倾斜显示。

<html>
<head>
<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>
</html>

3）字体变形　　font-variant

font-variant属性可以设定小型大写字母。

<html>
<head>
<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>
</html>

4）字体加粗　　font-weight

font-weight属性设置文本的粗细。关键字blod设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

<html>
<head>
<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>
</html>

5）字体大小　　font-size

font-size属性设置文本的大小。属性值是像素pixels，可以是绝对或相对值。绝对值不允许用户在所有浏览器中改变文本大小，可用性不高。相对大小允许用户在浏览器改变文本大小。

有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。

请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。

<html>
<head>
<style type="text/css">
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

<html>
<head>
<style type="text/css">
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

我们也可以综合使用百分比和em。这样代表非常有效，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小：

<html>
<head>
<style type="text/css">
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>