CSS 字体LOGIN

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>


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体属性 font</title> <style> .s1 {font:italic normal bold 1.5em Arial} .s2 {font:normal small-caps normal 18px Courier} </style> </head> <body> <p class = "s1">这段文字的字体风格(font-style)属性值是italic,字体变量(font-variant)属性值是normal, 字体浓淡(font-weight)属性值是bold,字体大小(font-size)属性值是1.5em,字体名称(font-family)属性值是Arial</p> <p class = "s2">这段文字的字体风格(font-style)属性值是normal,字体变量(font-variant)属性值是small-caps, 字体浓淡(font-weight)属性值是normal,字体大小(font-size)属性值是18px,字体名称(font-family)属性值是Courier</p> </body> </html>
提交重置代码
章节课件