css字体设置
字体族科
语法: font-family: [[<族科名称> | <种类族科>],]* [<族科名称> | <种类族科>]
允许值: <族科名称> 任意字体族科名称都可以使用
<种类族科> serif (e.g., Times)
sans-serif (e.g., Arial or Helvetica)
cursive (e.g., Zapf-Chancery)
fantasy (e.g., Western)
monospace (e.g., Courier)
初始值: 由浏览器决定
适用于: 所有对象
向下兼容: 是
字体变形
语法: font-variant: <值>
允许值: normal (普通) | small-caps (小型大写字母)
初始值: normal
适用于: 所有对象
向下兼容: 是
字体风格
语法: font-style: <值>
允许值: normal (普通)| italic (斜体)| oblique (倾斜)
初始值: normal
适用于: 所有对象
向下兼容: 是
字体加粗
语法: font-weight: <值>
允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
适用于: 所有对象
向下兼容: 是
字体加粗属性用作说明字体的加粗。当其它值绝对时，bolder和lighter值将相对地成比例增长。
注意: 因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择:
500 会被 400代替，反之亦是
100-300 会被指定为下一较细的加粗，如果有的话，否则就是下一较粗的加粗
600-900 会被指定为下一较粗的加粗，如果有的话，否则就是下一较细的加粗
字体大小
语法: font-size: <绝对大小> | <相对大小> | <长度> | <百分比>
允许值: <绝对大小> xx-small | x-small | small | medium | large | x-large | xx-large
<相对大小> larger | smaller
<长度>
<百分比> (in relation to parent element)
初始值: medium
适用于: 所有对象
向下兼容: 是
字体大小属性用作修改字体显示的大小。绝对长度(使用的单位为pt-像素和in-英寸) 需要谨慎地考虑到其适应不同浏览环境时的弱点。对于一个用户来说，绝对长度的字体很有可能会很大，或很小。
一些大小指定的定义如下:
H1 { font-size: large } P { font-size: 12pt } LI{ font-size: 90% } STRONG { font-size: larger }网页制作者需要清楚Microsoft Internet Explorer 3.x 会错误地将em 和ex单位当作像素，这很可能会令到使用了这些单位的文本不可读。浏览器还会错误地将百分比值视为相对于选中部分的缺省字体大小，而不是上级元素的字体大小。这种做法像H1 { font-size: 200% }这是危险的，其大小将被视为IE的一级标题的缺省字体大小的两倍，而不是两倍于上级元素的字体大小。在这种情况中，BODY 通常会被视为上级元素，而且很可能定义一个medium的字体大小，然而，在IE中一级标题的缺省字体大小可能被认为是xx-large。
注意到了这些错误后，网页制作者在使用字体大小属性时，应该小心使用百分比的值，而且应该尽量避免使用em和ex这两个单位。
字体样式对应名称
在网站中，都不可避免的要用到一些中文字体，比如微软雅黑，黑体等，在css中写入中文的方法一般是：font-family:"微软雅黑","黑体";这样类似的表达方式，但是对于像 WordPress 这样需要 UTF8 编码平台来说，一个不注意没有转换编码就会导致中文字体无法按照希望的字体表形出来。所以我们可以通过英文、unicode 这种形式来表达中文，比如说刚才的 font-family:"微软雅黑","黑体";就可以写成 font-family:"Microsoft Yahei","SimHei";在Firefox 的某些版本和 Opera 不支持 SimHei的写法，采用font-family:\5FAE\8F6F\96C5\9ED1;写法
这些unicode太难记，下面的表示一些常用的字体
|
华文细黑 |
STHeiti Light [STXihei] |
\534E\6587\7EC6\9ED1 |
|
华文黑体 |
STHeiti |
\534E\6587\9ED1\4F53 |
|
华文楷体 |
STKaiti |
\534E\6587\6977\4F53 |
|
华文宋体 |
STSong |
\534E\6587\5B8B\4F53 |
|
华文仿宋 |
STFangsong |
\534E\6587\4EFF\5B8B |
|
丽黑 Pro |
LiHei Pro Medium |
\4E3D\9ED1 Pro |
|
丽宋 Pro |
LiSong Pro Light |
\4E3D\5B8B Pro |
|
标楷体 |
BiauKai |
\6807\6977\4F53 |
|
苹果丽中黑 |
Apple LiGothic Medium |
\82F9\679C\4E3D\4E2D\9ED1 |
|
苹果丽细宋 |
Apple LiSung Light |
\82F9\679C\4E3D\7EC6\5B8B |
|
Windows |
||
|
新细明体 |
PMingLiU |
\65B0\7EC6\660E\4F53 |
|
细明体 |
MingLiU |
\7EC6\660E\4F53 |
|
标楷体 |
DFKai-SB |
\6807\6977\4F53 |
|
黑体 |
SimHei |
\9ED1\4F53 |
|
宋体 |
SimSun |
\5B8B\4F53 |
|
新宋体 |
NSimSun |
\65B0\5B8B\4F53 |
|
仿宋 |
FangSong |
\4EFF\5B8B |
|
楷体 |
KaiTi |
\6977\4F53 |
|
仿宋_GB2312 |
FangSong_GB2312 |
\4EFF\5B8B_GB2312 |
|
楷体_GB2312 |
KaiTi_GB2312 |
\6977\4F53_GB2312 |
|
微软正黑体 |
Microsoft JhengHei |
\5FAE\x8F6F\6B63\9ED1\4F53 |
|
微软雅黑 |
Microsoft YaHei |
\5FAE\8F6F\96C5\9ED1 |
|
Office |
||
|
隶书 |
LiSu |
\96B6\4E66 |
|
幼圆 |
YouYuan |
\5E7C\5706 |
|
华文细黑 |
STXihei |
\534E\6587\7EC6\9ED1 |
|
华文楷体 |
STKaiti |
\534E\6587\6977\4F53 |
|
华文宋体 |
STSong |
\534E\6587\5B8B\4F53 |
|
华文中宋 |
STZhongsong |
\534E\6587\4E2D\5B8B |
|
华文仿宋 |
STFangsong |
\534E\6587\4EFF\5B8B |
|
方正舒体 |
FZShuTi |
\65B9\6B63\8212\4F53 |
|
方正姚体 |
FZYaoti |
\65B9\6B63\59DA\4F53 |
|
华文彩云 |
STCaiyun |
\534E\6587\5F69\4E91 |
|
华文琥珀 |
STHupo |
\534E\6587\7425\73C0 |
|
华文隶书 |
STLiti |
\534E\6587\96B6\4E66 |
|
华文行楷 |
STXingkai |
\534E\6587\884C\6977 |
|
华文新魏 |
STXinwei |
\534E\6587\65B0\9B4F |
有一种快速获得字体Unicode编码的方法
css字体设置(不同浏览器设置效果)
乍一听css字体设置很容易,其实真做起来不然。我们工程师使用原力，他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。
font-size 属性：
font-size属性可以被设置给任何一个html标签，即使是不能包含文本的标签也可以设置它，比如：<br/>。可以被赋值是各种各样滴，比如：绝对，相对，长度值
一个元素的font-size属性会自动继承它父节点元素的font-size属性值，除非你覆盖了它。当你给font-size设置相对大小的时候这一点很重要。
font-size 设置的绝对关键字：
以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字font-size的时候，该元素就不会继承父元素的字体大小
- font-size: xx-small;
- font-size: x-small;
- font-size: small;
- font-size: medium;
- font-size: large;
- font-size: x-large;
- font-size: xx-large;
尽管大多数的浏览器支持上面的关键字，但是他们的精确的大小是不相同滴。
font-size的绝对大小：
fone-size能被设置成下面得绝对大小：
- mm: 毫米，例如：10mm.
- cm: 厘米 ，例如：1cm ( = 10mm).
- in: 英寸（inch）,例如 ： 0.39in ( ~= 10mm).
- pt: point（点）, 1pt 相当于 1/72 英寸， 例如： 12pt.
- pc: pica（十二点活字）, 1pc 是 12pt
- px: pixel（像素）, 例如： 14px.
一般说来上面得这些度量单位都有些问题
比如：毫米，厘米，英寸是对于不同媒体介质是不精确地，由于分辨率的设置不同，pt和pc就是相对不可靠地。pix来起来是最合适的，但是它能导致一些辅助性问题：IE下不能重新调整字体的大小。
相对大小：font-size属性能被设置成相对于父节点的字体大小的相对大小。
- em: 1em相当于当前字体的1倍大小的字体。2em相当于当前字体的2倍字体大小的字体。
- %: 100%相当于当前字体大小, 200% 相当于2倍字体的大小.
- ex: 1ex 相当于当前字体中字母 ‘x’高度值一样大小的字体.
很少的开发者使用ex ，实际上某些情况下ex还是相当好用的，比如当你需要更精确的字体的大小的时候，1ex要比0.525em更好，更精确。
%和em的值是等价的，比如:50% = 0.5em, 100% = 1em, 120% = 1.2em等等，
尽管会有很少的一些浏览器有些微妙的差别，但是毕竟那是很少见的问题。如果你想要保存更小的字节，就需要用更短的名字去定义font-size的值。比如：50%要比0.5em占用字节少，1em要比100%占用的字节少。
文本字体的大小和页面放缩。
这是附加复杂深入部分，大多数浏览器允许用户在浏览器中做如下操作：
1.增加或减少基本字体大小（图片除外）
2.页面放缩是所有的文字和图片也相应发生放缩变化。
3.不但允许字体放缩，而且还允许页面放缩
备注（深入理解）：在ie中如果页面中的元素的字体被用px（像素）赋值了，那么该元素的字体在页面放缩的时候不会发生变化。
如果您是有印刷行业背景的设计师将要转移到web设计，那就建议您不要给予用户过多的权利否则他们会打乱您的设计作品。您的设计作品被放大到200%的时候，或者字体减少至50%，就会被破坏掉。
css font-size 设置建议(规范)
一般来说，大多数情况下使用em或者%，这样字体就能被浏览器用更精细比例的字体支持。我个人建议使用百分比%来定义font-size大小，这种做法在一些老的浏览器中支持的也会更好。
当你在开发一个网站的时候有下面的一组建议提供给您：
1. 在testing之前，重置所有浏览器的字体的大小。
2.尽量合理的定义字体的大小，以便于在页面放缩的时候页面仍然保持良好的可读性。