标签：
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>
标签：
原文地址：http://www.cnblogs.com/wddoer/p/4342941.html
