CSS 字体
css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。
设置字体名称属性(font-family)
这个属性设置页面中选择用哪种字体，常用的字体有：Simsun、Arial、Verdana、Helvetica、 sans-serif等，定义方法：
.ziti {font-family: Simsun,Arial,Verdana;}
在这里连续定义了三种字体，当用户字库中没有第一种字体时就使用第二种，以此类推，如果CSS中设置的字体都没有则使用浏览器中的默认值。
设置字体大小属性(font-size)
font-size可以设置页面中字体大小，有三种常用的单位em，px，pt。
简短介绍一下这三种长度单位：
px，相对长度单位。像素（Pixel）。
em，相对长度单位。相对于当前对象内文本的字体尺寸。
pt，绝对长度单位。点（Point）。
其中最常用的就是px。字体设置方法如下：
.ziti {font-size:12px;}
设置字体风格属性(font-style)
字体风格是设置字体是否斜体的属性，一共有三个值：
normal、 italic、oblique，normal是默认值，italic，oblique都是斜体显示。例子：
.ziti {font-style:italic;}
设置字体粗细（浓淡）属性(font-weight)
字体的粗细（浓重）只有两个属性，因为它只有粗体和非粗体两种，它的值是normal和bold，normal是默认值。例子：
.ziti {font-weight:bold;}
设置字体变量属性(font-variant)
font-variant只针对英文字母，对汉字没有效果。它定义字体以小型号大写字母显示，小型大写字母可以理解为小个子的大写字母，它虽然是大写字母，但它的文字大小却和小写字母是相同的，比直接输入的大写字母要小。
font-variant有两个值，normal和small-caps。normal是默认值，它是正常的字体。small-caps是将小写字母转换成大写字母。例子：
.ziti {font-variant:small-caps;}
字体属性综合写法(font)
font是字体属性中可以综合定义以上五种属性的快捷方法，它可以用一行来定义font属性，书写顺序分别是：font-style font-variant font-weight font-size font-family。例子：
.ziti {font:italic normal bold 18px arial;}
如果哪项属性是默认值，可以把他省略不写，系统会自动解析其为默认值。
字体颜色(color)
字体的颜色属于CSS文本属性中的内容，它不像字体属性那样需要在color前加上font，只需要color就可以定义了。
.ziti {font:italic normal bold 18px arial;color:red;}
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
实例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
尝试一下
在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
还可以使用百分比来调整字体大小：body {font-size:100%;}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋体",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).</p>
<p id="pall">定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).</p>
<p id="p2">字体属性演示</p>
</body>
</html>
哈哈哈
大致都了解了
5年前 添加回复 0