CSS 字体 - 竹间

1.font-family

不限长度的字体列表，字体包含空格须用引号包含如："Times Now Roman"

通用字体族（所有操作系统都可用，作为备用字体放在列表末尾）

通用字体	包含的相关字体
serif	Times, Times New Roman
sans-serif (sans指无额外装饰，比serif更易阅读)	Arial, Helvetica
monospace	Courier, Courier New

 

 

 

 

 

 

2.font-size

不指定时，浏览器默认为16px（=1em）

在所有浏览器显示相同文本大小并允许缩放的解决方案——百分比+em:

<span style="color: #008080;">1</span> <span style="color: #800000;">body</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 100%</span>;}
<span style="color: #008080;">2</span> <span style="color: #800000;">h1</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 2.5em</span>;}
<span style="color: #008080;">3</span> <span style="color: #800000;">h2</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 1.875em</span>;}
<span style="color: #008080;">4</span> <span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 0.875em</span>;}

3.font-style: normal/italic/oblique

当所用字体无斜体样式时，Safair使用默认字体，IE忽略该样式使用原字体。

4.font-weight：normal / bold

5.font-variant: normal / small-caps(小型大写字母)

 

简写：    font：font-size, font-family [其他可选]   / line-height

---

 

CSS3.0服务器端字体——@font-face——IE9及以上支持

<span style="color: #008080;">1</span> <span style="color: #800000;">@font-face</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    font-family</span>:<span style="color: #0000ff;">WebFont</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    src</span>:<span style="color: #0000ff;"> url('Fontin_Sans_R_45b.otf')  format("opentype")</span>;/*字体文件路径和字体文件格式*/
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    font-weight</span>:<span style="color: #0000ff;"> normal</span>;  
<span style="color: #008080;">5</span> }
<span style="color: #008080;">6</span> <span style="color: #800000;">h1</span>{
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    font-family</span>:<span style="color: #0000ff;"> WebFont</span>;    
<span style="color: #008080;">8</span> }

<span style="color: #008080;">1</span> <span style="color: #800000;">@font-face</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    font-family</span>:<span style="color: #0000ff;"> Helvetica</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    src</span>:<span style="color: #0000ff;"> local("Helvetica Neue") , url('服务器端字体')</span>; /*先搜索本地字体，再搜索服务器上的字体*/
<span style="color: #008080;">4</span> }