码迷,mamicode.com
首页 > Web开发 > 详细

CSS 08 字体

时间:2020-07-13 11:33:48      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:mic   hicon   mes   src   微软雅黑   icon   icc   pre   time   

示例 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>

技术图片

 

CSS 08 字体

标签:mic   hicon   mes   src   微软雅黑   icon   icc   pre   time   

原文地址:https://www.cnblogs.com/JasperZhao/p/13291917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!