CSS字体

CSS font-family 属性

CSS family-name 系列性字体名称

示例

p
{
	font-family:Arial, "宋体", Tahoma, "Times NEW Roman";
}

由于系统中不一定有我们定义的字体,所以我们可以使用font-family属性的取值方式定义多个字体,如果第一个字体没有,可以显示下一个,以此类推.

CSS generic-family 一般性字体名称

示例

.f1 
{
	font-family:serif;
}

.f2 
{
	font-family:sans-serif;
}

.f3 
{
	font-family:cursive;
}

.f4 
{
	font-family:fantasy;
}

.f5 
{
	font-family:monospace;
}

在不同的浏览器上相同的generic-family的表现是不一样的,取决于用户安装了的字体.我们可以使用IE,Firefox,Opera分别测试下面事例.

说明:

• 每台计算机上已经安装了的字体都是不同的,如果我们想显示我们要显示的字体可以使用family-name属性值的方法罗列很多字体名或者也可以使用generic-family字体(generic-family代表一系列字体的简称).(这个好像对中文没什么意义:()
• 定义字体的时候最好在最后加上一个generic-family.

Generic字体名与可取字体对照表

Generic font 名称	可以显示的字体
serif	Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
sans-serif	MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
cursive	Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
fantasy	Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
monospace	Courier, MS Courier New, Prestige, Everson Mono

 

CSS font-size 属性

说明:

• 中文常用的字体大小是12px,向标题什么的应该使用大字体,但我们不要使用字体大小属性,应该使用h1,h2等HTML标签.
• HTML的big,small标签定义了大字体和小字体的文字,此标签已经被w3c抛弃,真正符合标准网页设计的显示文字大小的方法是使用 font-size CSS属性.
• 在Firefox中可以使用Ctrl++增大字体尺寸,Ctrl--减小字体尺寸.

CSS font-style 属性

示例

p#normal
{
	font-style:normal;
}

p#italic
{
	font-style:italic;
}

p#oblique
{
	font-style:oblique;
}

 

说明:

• HTML的i标签定义了斜体显示的字体,此标签已经被w3c抛弃.
• XHTML的em标签,在多数浏览器中也是显示了斜体,这是没有必要的,因为em标签本身是强调的意思.
• 真正符合标准网页设计的显示斜体文字的方法是使用font-style:italic; CSS属性.
• 由于有一些字体本身没有斜体样式,所以有时斜体显示将被忽略.

CSS font-variant 属性

示例

p#small-caps
{
	font-variant:small-caps;
}

p#uppercase
{
	text-transform:uppercase;
}

说明:

• CSS的text-transform属性可以通过uppercase定义大写字母.
• CSS的font-variant可以通过small-caps定义小型的大写字母.

CSS font-weight 属性

CSS font-weight 属性font-weight属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性

示例

p#normal
{
	font-weight:normal;
}

p#bold
{
	font-weight:bold;
}			

p#100
{
	font-weight:100;
}

p#900
{
	font-weight:900;
}

说明:

• HTML的b标签定义了粗体显示的字体,此标签已经被w3c抛弃.
• XHTML的strong标签,在多数浏览器中也是显示了粗体,这是没有必要的,因为strong标签本身是强调的意思.
• 真正符合标准网页设计的显示粗体文字的方法是使用font-weight:bold; CSS属性.
• 使用100-900的数值表示粗体的时候通常情况下不会表现出什么不同.

CSS font 属性

前面的讲的五个字体属性完全可以使用font属性代替.

font的取值有点复杂,取值主要分为两部分,现在举几个[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]取值的例子.

示例

p
{
	font:italic small-caps bold 12px/1.2em Arial;
}

定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).

p
{
	font:1em Arial;
}			

定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性),这是字体取值的最小形式(使用字体font属性时最少也要有font-size和font-family).

p
{
	font:bold 1em "宋体",Arial,Times;
}

定义段落的字体为粗体(font-weight属性),1倍字体大小(font-size属性),"宋体",Arial,Times字体(font-family属性).

p
{
	font:italic 12px/2em "宋体",Arial,Times;
}

定义段落的字体为斜体(font-style属性),12px字体大小(font-size属性),2倍(字体)的行高(line-height属性),"宋体",Arial,Times字体(font-family属性).

说明:

• HTML的font标签定义了字体的样式,此标签已经被w3c抛弃.