CSS字体样式属性

字      体:font-family

字体大小:font-size

字体颜色:font-color

字体粗细:font-weight

文字样式:font-style

大家在使用字体样式定义的时候要注意使用常用的字体,不然的话只有你安装过你定义的字体的PC才会看到效果,而没有安装该字体的PC就看不到你设置的效果了。

多说无益,大家看效果吧

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之CSS文字设置</title>
<style type="text/css">
       h1{font-family: 宋体;}
       /*h2{font-family: BOBOWHITE;} 大家看看这字体你们的电脑会显示嘛*/
       h2{font-family: "KR Be Mine";} /*没有这个字体的小伙伴不会显示这个字体,英文字体如果有空格,那么这个字体要用""包裹起来*/
       p{font-family: "宋体","微软雅黑","正楷","Sans-serif";}/*多个属性字体,中间用,号隔开,最终使用字体会按照顺序查找,如果都没有找到,那么就会使用浏览器默认的字体,Sans-serif是字体集*/

    </style>
</head>
<body>
<h2>出师表</h2>
<h2>abcdefg</h2>
    <p>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。<br/>
       先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。<br/>
       后值倾覆,受任于败军之际,<b style="font-family: '正楷'";><!--当外层有双引号时,内层要用单引号-->奉命于危难之间</b>,尔来二十有一年矣。<br/>
    </p>

</body>
</html>

由上面的例子,我们可以总结出以下规律(英文输入状态下

font-family:(字体1),(字体1),(字体1)....

含有空格的字体名和中文,用""号隔开

多个字体(,)号隔开吗

嵌套层内,外层使用双引号,内使用单引号

接下来,我们来讲一些具体的样式使用

font-size文字大小

font-size分为绝对单位和相对单位

绝对单位就是in(英寸),cm(厘米),mm(毫米),pt(磅),pc(Pica,1pc=12pt)

当我们对字体大小不进行设置的时候,默认就是浏览器大小(一般为16px)

下面我们来通过这个例子了解一下这些单位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS文字样式</title>
<style type="text/css">
    .in{font-size: 1in;}
    .cm{font-size: 1cm;}
    .mm{font-size: 1mm;}
    .pt{font-size: 1pt;}
    .pc{font-size: 1pc;}
    </style>
</head>
<body>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>

</body>
</html>

还有一种绝对单位,大家了解一下,不同的浏览器下面这种绝对单位的效果不一定一样

font-size绝对单位
属性值CSS缩放系数1.2
xx-small9px
x-small11px
small13px
medium16px
large19px
x-large23px
xx-large28px

大家把浏览器切换到英文状态下,在字体自定义处应该可以看到这几个熟悉的英文,通过下面的例子来感受一下,为了让大家看的更清楚,我对网页内容经行了200%放大

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS文字样式</title>
<style type="text/css">
          .xx-small{font-size: xx-small;}
          .x-small{font-size: x-small;}
          .small{font-size: small;}
          .medium{font-size: medium;}
          .large{font-size: large;}
          .x-large{font-size: x-large;}
          .xx-large{font-size: xx-large;}

    </style>
</head>
<body>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>

</body>
</html>

下面我们来了解一下相对单位,绝对单位的字体大小不会随着浏览器或者父元素的字体大小改变而改变

相对单位包含 px像素和em或者%

px单位制受显示器分辨率的影响,所以手机状态下设置大小一般不用px

大家要注意一点,子元素继承字体大小,继承的是字体大小的计算值,而不是父元素本身的字体大小

1例

	<style type="text/css">
	     #ccava{font-size: 40px;}
	     .em{font-size: 4em;}
	     .percent{font-size: 20%;}


    </style>
</head>
<body>
	<div id="ccava">
		<p>诸葛亮<span class="em">出师表</span></p><!--出师表应该160px-->
		<p>漫步<span class="percent">白月光</span></p><!--白月光应该是8px-->
	</div>

2例

	<style type="text/css">
	     #ccava{font-size: 40px;}
	     .large{font-size: large;}
	     .small{font-size: small;}


    </style>
</head>
<body>
	<div id="ccava">
		<p>诸葛亮<span class="large">出师表</span></p>
		<p>漫步<span class="small">白月光</span></p>
	</div>

大家通过上面的2例,应该有发现large和small只是相对父元素变大或者变小

color文字颜色

颜色想必大家已经了解了很多了,我们颜色一般直接用red英文字母或者rgb(0-255;0%-100%超过这个范围会自动修正)(red,green,blue三原色)值,或者#xxxxxx16(对大小写不敏感)进制(0-9+a-f=0-f)颜色值来表示,如果16进制的值是#008800的时候,我们可以写成#080

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS文字样式</title>
<style type="text/css">
      h1{color: red;}
      h2{color: rgb(153,50,204);}
      h3{color: #008800;}
      h4{color: #080;}

    </style>
</head>
<body>
<h1>漫步白月光</h1>
<h2>漫步白月光</h2>
<h3>漫步白月光</h3>
<h4>漫步白月光</h4>

      

</body>
</html>

font-weight文字粗细/斜体/变形

文字粗细:font-weight:normal | bold | bolder | lighter | 100~900

normal是默认值,按照数值来说400等同于normal,bold相当于700

复习一下,html加粗 是<b></b>或者<strong></strong>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS文字样式</title>
<style type="text/css">
div{font-family: 微软雅黑;}
#normal{font-weight: normal;}
.bold{font-weight: bold;}
.bolder{font-weight: bolder;}
#lighter{font-weight: lighter;}
.cc{font-weight: 100;}
.ava{font-size: 900;}
    </style>
</head>
<body>
<div>
<p id="normal">漫步白月光</p>
<p>漫步白月光</p>
<p>漫步白月光</p>
<p id="lighter">漫步白月光</p>
<p>漫步白月光这是100</p>
<p id="ava">漫步白月光这是900</p>
</div>
</body>
</html>

大家肯定发现了,区别不是很明显,一般我们用bold。

文字斜体:font-style:normal | italic | oblique

normal是默认值

大家回忆一下html的时候斜体是<i></i>或者<em></em>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS文字样式</title>
      <style type="text/css">
             div{font-family: 微软雅黑;}
             #normal{font-style: normal;}
             .italic{font-style: italic;}
             .oblique{font-style: oblique;}
     </style>
</head>
<body>
   <div>
	<p id="normal">漫步白月光</p>
	<p class="italic">漫步白月光</p>
	<p class="oblique">漫步白月光</p>
   </div>
</body>
</html>

文字变形:font-variant: normal | small-caps(小型大写字母)   仅仅针对英文

normal是正常字体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光CSS文字样式</title>
    <style type="text/css">
         #normal{font-variant: normal;}
         .small-caps{font-variant: small-caps;}
    </style>
</head>
<body>
   <div>
      <p id="normal">www.ccava.net</p>
      <p class="small-caps">www.ccava.net</p>	
   </div>
</body>
</html>