示例1:

尺寸

屬性：font-size
值：數字或者百分比

<style>
p.big{
  font-size:30px;
}
 
p.small{
  font-size:50%;
}
   
p.small2{
  font-size:0.5em;
} 
</style>
 
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同於 50%比例的文字</p>
 

示例2:

風格

font-style:
normal 標準字型
italic 斜體

<style>
p.n{
  font-style:normal;
}
 
p.i{
  font-style:italic;
}
</style>
 
<p >標準字型</p>
<p class="n">標準字型</p>
<p class="i">斜體</p>

示例3:

粗細

屬性 font-weight
normal 標準粗細
bold 粗一點

<style>
p.n{
  font-weight
 
:normal;
}
p.b{
  font-weight:bold;
}
</style>
 
<p >標準字型</p>
<p class="n">標準字型</p>
<p class="b">粗一點</p>

示例4:

字型檔

屬性font-family

<style>
p.f1{
  font-family:"Times New Roman";
}
 
p.f2{
  font-family:Arial;
}
p.f3{
  font-family:宋體;
}
p.f4{
  font-family
 
:黑體;
}
p.f5{
  font-family:楷體;
}
p.f6{
  font-family:微軟雅黑;
}
</style>
 
<p >預設字型檔 font family:default </p>
<p class="f1">設定字型檔 font-family: Times New Roman</p>
<p class="f2">設定字型檔 font-family: Arial</p>
<p class="f3">設定字型檔 font-family: 宋體, 這種字型是IE預設字型</p>
<p class="f4">設定字型檔 font-family: 黑體</p>
<p class="f5">設定字型檔 font-family: 楷體</p>
<p class="f6">設定字型檔 font-family: 微軟雅黑, 這個字型是火狐預設字型</p>

示例5:

宣告在一起

把大小，風格，粗細，字型檔都寫在一行裡面

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>預設字型</p>
 
<p class="all">斜體的 粗體的 大小是30px的 "Times New Roman" </p>