css属性字体（font）样式使用详解

浏览数：26 / 时间：2015年06月09日

现在主要设置的字体样式种类有以下五种

1、font-style：指定文本字体样式

itailc：指定为斜体

oblique：对于没有设计过斜体样式的文字强行用代码使其倾斜

2、font-variant：指定文本是否为小型的大写字母（只对字母有效）

small-cap：小型的大写字母

3、font-weight：指定文本字体的粗细

bold：粗体400

4、font-size：指定文本字体尺寸

xx-small/x-small/small/medium/large/x-large/xx-large/smaller/large

length类型

em/ex/ch/rem/vw/vh/vmax/vmin/cm/mm/q/in/pt/pc/px

percentage 百分比形式

number 数值形式

5、font-stretch：指定文字宽窄，没什么效果

html文件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="css/1.css" />
</head>
<h3>font-style样式：指定文字字体样式</h3>
<span>正常文字</span>
<br />
<span class="italic">指定文本样式为斜体</span>
<br />
<span class="oblique">对于原来的字体没有斜体的样式的字体设置斜体</span>
<h3>font-varint（变种）样式：指定文本字母是否为小型的大写字母</h3>
<span class="small-cap">xiaoxingdedaxiezimu</span>
<h3>font-weight样式：指定文本字体粗细</h3>
<span class="bold">粗体的文字400</span>
<h3>font-size样式：指定文字尺寸</h3>
<span class="xx-small">xx-smmall字体</span>
<span class="xx-large">xx-large</span>
<br />
<span class="length"><p>em ex ch rem vw vh vmax vmin cm mm q in pt px pc</p></span>
<br />
<span class="percentage">百分比形式</span>
<br />
<span class="number">number形式</span>
<h3>font-family：指定文本使用哪种字体</h3>
<span class="famliy">使用楷体文字</span>
<h3>font-stretch：指定文本伸展</h3>
<span class="stretch">文字宽度凤凰飞京哈</span>
</body>
</html>

</pre><p></p><p>css文件</p><p><pre name="code" class="css">.italic{
	font-style:italic;
}
.oblique{
   font-style:oblique;
}
.small-cap{
	font-variant:small-caps;
}
.bold{
	font-weight:bold;
}
.xx-small{
	font-weight:xx-small;
}
.xx-large{
	font-size:xx-large;
}
.length{
	font-size:2em;
}
.percentage{
	font-size: 200%;
}
.number{
	font-size:0.58;
}
.famliy{
	font-family:"楷体";
}
.stretch{
	font-stretch:ultra-expanded;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css属性字体（font）样式使用详解