css常用的字体组合

灰太狼 2022-08-19 08:47 191阅读 0赞

## 常用的字体组合 ##

font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。

请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有其他字体可用的话：

### 实例 ###

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

[亲自试一试][Link 1]

下面是最常用的字体组合，根据通用系统进行汇总：

## Serif 字体 ##

## Sans-Serif 字体 ##

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:708.8px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; width:403px; background-color:rgb(213,213,213)"> font-family</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 示例文本</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> Arial, Helvetica, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-size:14px">This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 'Arial Black', Gadget, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:'Arial Black',Gadget,sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:'Arial Black',Gadget,sans-serif"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 'Comic Sans MS', cursive, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:'Comic Sans MS',cursive,sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:'Comic Sans MS',cursive,sans-serif"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> Impact, Charcoal, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:Impact,Charcoal,sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:Impact,Charcoal,sans-serif"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 'Lucida Sans Unicode', 'Lucida Grande', sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> Tahoma, Geneva, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:Tahoma,Geneva,sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:Tahoma,Geneva,sans-serif"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 'Trebuchet MS', Helvetica, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:'Trebuchet MS',Helvetica,sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:'Trebuchet MS',Helvetica,sans-serif"> This is a paragraph</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> Verdana, Geneva, sans-serif</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <h2 style="margin:0px; padding:0px; border:0px; font-family:Verdana,Geneva,sans-serif; font-size:14px"> This is a heading</h2> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px; font-family:Verdana,Geneva,sans-serif"> This is a paragraph</p> </td> 
  </tr> 
 </tbody> 
</table>

## Monospace 字体 ##

[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=csse_font-family