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

最新推荐文章于 2025-06-29 13:11:25 发布

原创最新推荐文章于 2025-06-29 13:11:25 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #字体

html历史网页历史 web标准 html+css+js 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨了HTML中字体样式的五大属性：font-style、font-variant、font-weight、font-size和font-family，通过实际代码展示每种样式的效果，并提供CSS文件用于实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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;
}