当前位置 博文首页 > g960526的博客：CSS中的字体样式
字体样式的作用:针对字体本身的一些修饰相关的样式,如字体的颜色,字体的大小等
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="descrption" content="">
<meta name="keywords" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
}
li{
border:1px solid red;
padding:10px;
margin:10px;
}
.color{
color:red;
}
.font-weight{
font-weight:bold;
/*
关键字：
bold 设置加粗
normal 默认不加粗
数值：（不带单位）
100~900 大于600等同于bold 小于600等同于normal
*/
}
.font-size{
font-size:50px;
/*
谷歌默认字体大小为16px 最小值为12px
固定的像素值 理论无上限
不同浏览器的是有下线的
百分比：参考父元素的字体大小
em单位
并不是具体的多少，是根据当前元素的字体大小有关系
当前元素字体大小的倍数
没有设置字体大小的时候，默认字体大小为父元素的字体大小
*/
}
.font-style{
font-style:italic;
/*
italic 字体斜体
normal 默认值不斜体
*/
}
.font-family{
font-family:"simsun"; /* 宋体 */
font-family:"小篆",simsun,sinHei;
/* 默认为微软雅黑---Microsoft yahei html不区分大小写
值
1.中文英文两种写法
2.关于引号，英文的值并且中间有空格的时候必须带引号，其他时候可带可不带
3.可以通过逗号隔开，写多个备用的字体
*/
}
.line-height{
font-size:20px;
line-height:2; /* 不带单位是倍数值 */
/* line-height:50px; */
/*
设置一行文字所占的高度
文字会在行高的高度居中
px固定的像素值，
直接写数值，代表字体大小的倍数
*/
}
.font{
/*
顺序：font:字体加粗 字体风格 字体大小/字体行高 字体类型;
字体颜色不能写在复合样式中
可以缺省，不需要的可以不写
最少得保留字体大小和字体类型
顺序可以换，建议固定一个顺序
*/
font:bold italic 20px/50px 华文彩云;
color:red;
font:30px "华文彩云"; /* 缺省 最少得保留字体大小和字体类型 */
}
</style>
</head>
<body>
<ul class="box">
<li class="color">字体颜色 color</li>
<li class="font-weight">字体粗细 font-weight</li>
<li class="font-size">字体大小 font-size</li>
<li class="font-style">字体斜体 font-style</li>
<li class="font-family">字体类型 font-family</li>
<li class="line-height">字体行高line-height</li>
<li class="font">字体复合样式</li>
</ul>
</body>
</html>
效果图如下
在复合写法中,其他都可以缺省,但是字体大小和字体类型不能缺省
