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

css属性字体(font)样式使用详解

时间:2015-04-17 11:41:35      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:css   html   字体   

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

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)样式使用详解

标签:css   html   字体   

原文地址:http://blog.csdn.net/qq_24928451/article/details/45081505

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