CSS字体

一、CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

1. 字体系列

   font-family 属性设置文本的字体系列。

   font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

   注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

   多个字体系列是用一个逗号分隔指明：

   p{font-family:"Times New Roman", Times, serif;}

2. 字体样式

   主要是用于指定斜体文字的字体样式属性。

   这个属性有三个值：

   • 正常 - 正常显示文本
   • 斜体 - 以斜体字显示的文字
   • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）字体大小

   p.normal {font-style:normal;}
   p.italic {font-style:italic;}
   p.oblique {font-style:oblique;}/*没什么用*/

3. 字体大小

   font-size 属性设置文本的大小。

   能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

   绝对大小：

   • 设置一个指定大小的文本
   • 不允许用户在所有浏览器中改变文本大小
   • 确定了输出的物理尺寸时绝对大小很有用

   相对大小：

   • 相对于周围的元素来设置大小
   • 允许用户在浏览器中改变文字大小

   如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

   设置字体大小像素(绝对大小):

   h1 {font-size:40px;}
   h2 {font-size:30px;}
   p {font-size:14px;}

   用em来设置字体大小(相对大小):

   h1 {font-size:2.5em;}

4. font-weight 属性

   p.normal {font-weight:normal;}
   p.thick {font-weight:bold;}
   p.thicker {font-weight:900;}

   属性值

   值	描述
   normal	默认值。定义标准的字符。
   bold	定义粗体字符。
   bolder	定义更粗的字符。
   lighter	定义更细的字符。
   100  200  300  400  500  600  700  800 900	定义由细到粗的字符。 400 等同于 normal， 而 700 等同于 bold。
   inherit	规定应该从父元素继承字体的粗细。

5. font复合属性

   font 简写属性在一个声明中设置所有字体属性。

   可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”

   font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

   p.ex1
   {
       font:15px arial,sans-serif;
   }
   
   p.ex2
   {
       font:italic bold 12px/30px Georgia, serif;
   }

二、CSS 文本格式

1. 文本颜色

   颜色属性被用来设置文字的颜色。

   颜色是通过CSS最经常的指定：

   • 十六进制值 - 如: ＃FF0000
   • 一个RGB值 - 如: RGB(255,0,0)
   • 颜色的名称 - 如: red

   参阅 CSS 颜色值 查看完整的颜色值。

   一个网页的背景颜色是指在主体内的选择：

   body {color:red;}
   h1 {color:#00ff00;}
   h2 {color:rgb(255,0,0);}

2. 文本的对齐方式

   文本排列属性是用来设置文本的水平对齐方式。

   文本可居中或对齐到左或右,两端对齐.

   当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

   h1 {text-align:center;}
   p.date {text-align:right;}
   p.main {text-align:justify;}

3. 文本修饰

   text-decoration 属性用来设置或删除文本的装饰。

   从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

   a {text-decoration:none;}

   也可以这样装饰文字：

   h1 {text-decoration:overline;}
   h2 {text-decoration:line-through;}
   h3 {text-decoration:underline;}

4. 文本转换

   文本转换属性是用来指定在一个文本中的大写和小写字母。

   可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

   p.uppercase {text-transform:uppercase;}
   p.lowercase {text-transform:lowercase;}
   p.capitalize {text-transform:capitalize;}

5. 文本缩进

   文本缩进属性是用来指定文本的第一行的缩进。

   p {text-indent:50px;}

三、文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：

text-shadow: h-shadow v-shadow blur color;

text-shadow: 5px 5px 6px rgba(0,0,0,.3)