一 字体风格 font-style
font-style属性用于字体显示的风格。
语法：{font-style:inherit|italic|normal|oblique}
说明：
(1)inherit　继承，表示该属性从父标签中继承而来。
(2)italic  斜体，表示使用斜体显示文字。
(3)normal  正常，为默认值。
(4)oblique　偏斜体，表示有点倾斜但不大。
示例1 t1.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字体类型</title>
<style type="text/css">
<!--h1{
font-style: inherit;
}
h2{
font-style: italic;
}
h3{
font-style: normal;
}
p {
font-style: oblique;
}
-->
</style>
</head>
<body>
<h1>继承inherit</h1>
<h2>斜体italic</h2>
<h3>正常normal</h3>
<p>偏斜体oblique</p>
</body>
</html>
二 字体变化 font-variant
font-variant属性用于指定英文字体在打印时的大小对比。
weight是什么意思啊
语法：{font-variant:normal|small-caps|inherit}
说明：
(1)normal 表示打印时大写字母没变化。
(2)small-caps 表示打印时大写字母比通常小一点。
(3)inherit　表示该属性从父标签中继承而来。
示例2 t2.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字体类型</title>
<style type="text/css">
<!--
h1{
font-variant:normal；
}
h2{
font-variant:small-caps；
}
h3{
font-variant:inherit；
}
-->
</style>
</head>
<body>
<h1>Normal表示打印时大写字母没变化</h1>
<h2>Small-caps 表示打印时大写字母比通常小一点</h2>
<h3>Inherit表示该属性从父标签中继承而来</h3>
</body>
</html>
三 字体亮度 font-weight
语法：{font-weight:100-900|bold|bolder|lighter|normal}
说明：浏览器默认的字体粗细为400。
(1)bold 表示黑体字(相当于数值700 )
(2)bolder 表示比黑体还要黑的字
(3)lighter 表示比黑体颜要浅
(4)normal 正常体(相当于数值400)
(5)可以指定100-900之间的3位整数,100表示最亮,400表示正常
示例3 t3.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字体类型</title>
<style type="text/css">
<!--
h1{
font-style: inherit;
font-weight:lighter;
}
h2{
font-style: italic;
font-weight:bolder;
}
h3{
font-style: normal;
font-weight:bold;
}
p {
font-style: oblique;
font-weight:100;
}
-
->
</style>
</head>
<body>
未设置样式的字体：床前明月光，疑是地上霜。
<h1>继承inherit，比黑体颜要浅lighter</h1>
<h2>斜体italic，比黑体还要黑bolder</h2>
<h3>正常体normal，黑体字bold</h3>
<p>偏斜体oblique，最亮100</p>
</body>
</html>
四 字体大小 font-size
font-size属性用来指定字体的相对或绝对大小。
语法：{ font-size：数值|large| larger| x-large|small|smaller| x-smal ...}
说明：字体大小使用数值设置也可以使用比例
(1)medium 标准
字体大小
(2)small 比父字体小一号的字
(3)x-small 比small小1.2倍的字
(4)xx-small 比x-small小1.2倍的字
(5)large 比父字体大一号的字
(6)x-large 比large大1.2倍的字
(7)xx-large 比x-large大1.2倍的字
(8)整数＋"符号单位"，符号单位有：象素px，点数pt，英寸in，毫米mm等
(9)整数+%，表示当前字体大小是父字体大小的百分比
示例4 t4.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字体类型</title>
<style type="text/css">
<!--
h1{
font-style: inherit;
font-weight:lighter;
}
h2{
font-style: italic;
font-weight:bolder;
}
h3{
font-style: normal;
font-weight:bold;
font-size:20pt;
}
p {
font-style: oblique;
font-weight:100;
font-size:medium;
}
-->
</style>
</head>
<body>
未设置样式的字体：床前明月光，疑是地上霜。
<h1>继承inherit，比黑体颜要浅lighter</h1>
<h2>斜体italic，比黑体还要黑bolder</h2>
<h3>正常体normal，黑体字bold，大小20pt</h3>
<p>偏斜体oblique，最亮100，标准大小medium</p>
</body>
</html>
五 字型设置 font-family
字体类型
语法：{ font-family:"字体1","字体2","字体3"; }
说明：
(1) 当指定了字体类型时，浏览器将调用客户端字体
(2 )当指定了多种字体时，浏览器会安顺序进行搜索，如果没有搜索到，就使用默认字体。
示例5 t5.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字体类型</title>
<style type="text/css">
<!--
h1{
font-style: inherit;
font-weight:lighter;
font-family:"楷体_gb2312";
}
h2{
font-style: italic;
font-weight:bolder;
font-family:"宋体";
}
h3{
font-style: normal;
font-weight:bold;
font-size:20pt;
}
p {
font-style: oblique;
font-weight:100;
font-size:medium;
}
-->
</style>
</head>
<body>
未设置样式的字体：床前明月光，疑是地上霜。
<h1>
继承inherit，比黑体颜要浅lighter<br>font-family:"楷体_gb2312"
</h1>
<h2>斜体italic，比黑体还要黑bolder</h2>
<h3>正常体normal，黑体字bold，大小20pt</h3>
<p>偏斜体oblique，最亮100，标准大小medium</p>
</body>
</html>
六 字体颜 color
语法：{color: 数值}
作用：字体颜
说明：颜参数取值范围
·以RGB值表示 如：#ff0000
·以默认颜的英文名称表示 如red
示例6 t6.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字体颜</title>
<style type="text/css">
<!--
h1{
font-style: inherit;
color:#ff0000;
}
-->
</style>
</head>
<body>
<h1>字体颜color </h1>
</body>
</html>
七 复合属性设置 font
可以使用font参数对一个标签进行复合属性设置。
标签{font:italic 30pt 楷体_gb2312}
示例6 t7.htm

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。