CSS之字体样式

最新推荐文章于 2023-12-14 18:11:41 发布

web菜鸟程序猿

最新推荐文章于 2023-12-14 18:11:41 发布

阅读量633

点赞数

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/zhou0107/article/details/9145689

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>CSS字体样式</title>
	<style style="text/css">
		/*Css 字体系列
		*serif字体，只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
		*/
		.ff{
			font-family: sans-serif serif;
		}
		/*字体风格 font-style
		*normal  正常字体
		*italic  文本斜体显示
		*oblique 文本倾斜显示
		*/
		.fs-italic{
			font-style:italic;
		}
		.fs-oblique{
			font-style:oblique;
		}
		/*字体变形 font-variant
		*属性值：small-caps
		**/
		.fv-small{
			font-variant:small-caps;
		}
		/*字体加粗 font-weight 
		*默认：normal
		*粗体：bold
		*更粗：bolder
		*更细：lighter
		*100-900：定义由细到粗的字符
		*inherit：从父元素继承字体的粗细
		**/
		.fw-bold{
			font-weight:bold;
		}
		.fw-bolder{
			font-weight:bolder;
		}
		.fw-lighter{
			font-weight:lighter;
		}
		.fw-own{
			font-weight:900;
		}
		/*字体大小 font-size
		*使用像素设置字体大小 ：font-size:60px;
		*使用em设置字体大小   :font-size:2em;
		*1em = 16px;
		*浏览器中默认的文本大小是 16 像素
		**/
		.fz-px{
			font-size:16px;
		}
		.fz-em{
			font-size:1em;
		}
	</style>
</head>
<body>
	<p class="ff">
		font-family字体serif测试
	</p>
	<p>正常显示</p>
	<p class="fs-italic">font-style斜体显示italic</p>
	<p class="fs-oblique">font-style倾斜显示oblique</p>
	<p class="fv-small">font-variant设定小型大写字母small-caps</p>
	<p class="fw-bold">font-weight定义粗体</p>
	<p class="fw-bolder">font-weight定义更粗的字体</p>
	<p class="fw-lighter">font-weight定义更细的字体</p>
	<p class="fw-own">font-weight自定义粗细</p>

	<p class="fz-px">font-size定义字体大小，单位：px</p>
	<p class="fz-em">font-size定义字体大小，单位：em</p>
</body>
</html>