CSS 字体样式

关于浏览器支持：若未特别标明则主流浏览器都支持，其中以IE作为重点关注（IE8以下不考虑）。

属性	描述	版本
font	在一个声明中设置所有字体属性	CSS1
font-style	规定文本的字体样式	CSS1
font-variant	规定是否以小型大写字母的字体显示文本	CSS1
font-weight	规定字体的粗细	CSS1
font-size	规定文本的字体尺寸	CSS1
font-family	规定文本的字体系列	CSS1
@font-face	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体	CSS3
font-size-adjust	为元素规定 aspect 值。	CSS3

font

font 属性用于一次设置元素字体的两个或更多方面。

值	描述
连写	字体 style, variant, weight, size, family 属性的依次连写。
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。

连写时可以不设置其中的某个值，未设置的属性会使用其默认值：

/*斜体加粗30像素的宋体，行高为50px*/
font:italic bold 30px/50px "simsun"; 

/*添加多个备用字体，当simsun不被支持时启用simhei,仍不被支持时启用Arial*/
font:italic bold 30px/50px "simsun","simhei","Arial";

/*省略 line-height 行高*/
font:italic bold 30px "simsun";  

/*省略 style*/
font:bold 30px/50px "simsun";

/*省略 weight */
font:italic 30px/50px "simsun";

/*省略 style 和 weight */
font:30px/50px "simsun";

/*只保留 size 与 family */
font:30px "simsun";

取其他值时的表现：

<style>
  div{ border-bottom: 1px solid #eee;padding:5px 0; }
  .div1{ font:caption; }
  .div2{ font:icon; }
  .div3{ font:menu; }
  .div4{ font:message-box; }
  .div5{ font:small-caption; }
  .div6{ font:status-bar; }
  .div7{ font-style: italic; }
  .div8{ font-style: oblique; }
  .div9{ font-variant: small-caps; }
</style>

<div>浏览器默认</div>
<div class="div1">1.设置：font:caption;</div>
<div class="div2">2.设置：font:icon;</div>
<div class="div3">3.设置：font:menu;</div>
<div class="div4">4.设置：font:message-box;</div>
<div class="div5">5.设置：font:small-caption;</div>
<div class="div6">6.设置：font:status-bar;</div>
<div class="div7">7.设置：font-style: italic;</div>
<div class="div8">8.设置：font-style: oblique;</div>
<div class="div9">9.设置：font-variant: small-caps;</div>

显示结果：

font-style

font-style 属性规定文本的字体样式

值	描述
normal	默认值。标准的字体样式。
italic	斜体的字体样式。
oblique	倾斜的字体样式。

italic 和 oblique 的区别
一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些，一些不常用的字体只有个正常体，这时使用 italic 是没有效果的，应该使用 oblique。
italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。

font-style: italic;

font-variant

font-variant 属性规定是否以小型大写字母的字体显示文本。

值	描述
normal	默认值。标准的字体。
small-caps	小型大写字母的字体。

font-variant: small-caps;

font-weight

font-weight 属性规定字体的粗细。

值	描述
normal	默认值。标准的字符。
bold	粗体字符。
bolder	更粗的字符。
lighter	更细的字符。
number	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 可能取值：100,200,300,400,500,600,700,800,900

font-weight:bold;
font-weight:600;

font-size

font-size 属性设置字体的尺寸。

值	描述
xx-small	浏览器中通常大小是9px。
x-small	通常大小是10px。
small	通常大小是13px。
medium	默认值，通常大小是16px。
large	通常大小是18px。
x-large	通常大小是24px。
xx-large	通常大小是32px。
smaller	比父元素更小的尺寸。
larger	比父元素更大的尺寸。
length	固定的值，如20px，10em，10rem，10pt等。
%	基于父元素的一个百分比值。如 60%。

font-size:small;
font-size:20px;

font-family

font-family 属性规定元素的字体系列。

font-family 的属性值是一个字体名称或以逗号隔开的多个字体名称集合。如果浏览器不支持第一个字体，则会尝试下一个，依次类推。

/*指定一个字体*/
font-family:Serif;  
/*指定多个字体备用*/
font-family:"Times New Roman",Georgia,Serif;
/*继承父元素字体*/
font-family:inherit;

@font-face

CSS3 新增 @font-face 允许自定义一个规则，使用额外的字体。该规则包含的属性：

属性	描述
font-family	必需，定义字体的名称。
url	必须，定义该字体下载的网址。
font-style	可选，定义字体样式，默认值是"normal"。
font-weight	可选，定义字体粗体，默认值是"normal"。
unicode-range	可选，定义该字体支持 Unicode 字符的范围，默认值是"ü+0-10 FFFF"。

例：在项目中使用额外的字体

@font-face{   
  /*必须项：自定义字体名字*/                                            
  font-family:myFont; 
  /*必须项：字体文件文件地址*/   
  src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */ 
     
  /*或写成以下格式更好的兼容各个浏览器                                   
  src:url('fonts/sw.eot') format('embedded-opentype'),    
    url('fonts/sw.svg') format('svg'),
    url('fonts/sw.ttf') format('truetype'),
    url('fonts/sw.woff') format('woff');
  */
} 
/*使用自定义的额外字体*/
p{ font-family: myFont; }

提示：IE 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体。

font-size-adjust

CSS3 新增 font-size-adjust 属性为元素规定 aspect 值。

该属性可以更好的控制字体大小：当一个字体不可用，浏览器使用第二个指定的字体。这可能会导致改变字体大小。为了防止这种情况，可使用 font-size-adjust 属性。所有字体都能有"aspect值"，这是小写字母"X"和大写字母"X"的大小差异。

值	描述
number	定义字体的 aspect 值比率。
none	默认。如果此字体不可用，则不保持此字体的 x-height。

aspect 值比率：

可使用的公式： 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸 举例： 如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

例：浏览器将调整字体大小，无论字体系列。（"宋体"性质值0.58）

p{ font-size-adjust: 0.58; }