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

CSS 字体样式

时间:2016-08-10 21:03:54      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

1.font-family 设置名称,控制使用何种字体

CSS:
    p{ font-family:"微软雅黑"; }
HTML:
    <p>hello world</p>

演示结果:

    hello world

 

2.font-size 控制字体大小尺寸

CSS:
    p{ font-size:18px; }
HTML:
    <p>hello world</p>

演示结果:

  hello world

 

3.font-weight 控制字体加粗

  取值:100,200,300,400,500,600,700,800,900,bold,bolder。

CSS:
    p{ font-weight:bold }
HTML:
    <p>hello world</p>

演示结果:

  hello world

 


4.font-style: 控制字体倾斜

  取值:normal、italic、oblique

CSS:
    p{ font-style:italic/oblique }
HTML:
    <p>hello world</p>

演示结果:

  hello world 

 

5.color 控制字体颜色

  取值:colorname、rgba()、十六进制

CSS:
    p{ color:gray; }
    p{ color:rgba(255,255,255,0); }
    p{ color:#ccc; }
HTML:
    <p>hello world</p>

演示结果:

  hello world

 

6.font的缩写

  font: font-style | font-weight | font-size | line-height | font-family

CSS:
    p{ font:italic bold 18px/25px "宋体" }
HTML:
    <p>hello world</p>

结果演示:

  Hello World

 

 

7.text-decoration 控制文本装饰线

  取值:overline underline line-throgh blink none

CSS:
    p:first-of-type{ text-decoration:overline; }
    p:nth-of-type(2){text-decoration:line-through; }
    p:last-of-type{ text-decoration:underline; }
HTML:
   <p>hello world</p>
   <p>hello world</p>
   <p>hello world</p>

演示结果

  hello world

  hello world

  hello world

 

8.text-shadow 控制文本阴影

  取值:x水平偏移量  y垂直偏移量  blur模糊程度(可选)  color颜色(可选)

eg:    技术分享

CSS:
    p{ text-shaow:3px 3px 2px red }
HTML:
    <p>hello world</p>

演示结果

  hello world

 

 

 

CSS 字体样式

标签:

原文地址:http://www.cnblogs.com/zona/p/5758141.html

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