CSS 4.3 样式-字体

CSS 4.3 样式-字体

 

1.字体系列font-family

字体包括通用字体系列和特定字体系列。

通用字体系列：相似外形的字体的组合，包含n个特定字体。用5种：

Serif字体：成比例（i和m不一样大），且有上下短线。包括：Times、Georgia和 New Century Schoolbook。

Sans-serif字体：成比例，无上下短线。包括： Helvetica、Geneva、Verdana、Arial或 Univers。

Monospace字体：不成比例（i和m一样大），短线可有可无。包括：Courier、Courier New 和 Andale Mono。

Cursive字体：模仿手写体。包括：Zapf Chancery、Author和 Comic Sans。

Fantasy字体：其他。包括： Western、Woodblock和 Klingon。

特定字体系列：即具体的字体，如：Times、Helvetica、Courier等等。

格式：

body { font-family：Serif；}

h { font-family：Times；}

h {font-family：Times Georgia‘New Century Schoolbook’Serif；}

h { font-family：Times Serif；}

注1：当使用特定字体时，可能没有此字体，防止此种情况，多写几个特定字体或与通用字体结合。显示时，前使用第一个，若没有，使用下一个···最后使用通用字体。

注2：对于两个词以上的字体或字体前有#等符号，用单引号（双引号也行，但是<p style="font-family: 'New York', serif;">...</p>时，只能单引号。）

字体效果：

 

2.字体风格font-style，默认normal

格式：p { font-style：normal（正常显示）或italic（倾斜显示）或oblique（倾斜显示）；}

注： italic 文本和oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic和 oblique文本在 web浏览器中看上去完全一样，但有时不同浏览器和字体的italic和 oblique会不一样，甚至不同浏览器和字体的italic（或oblique）也不一样，所以，一直使用

某一个，如italic，忘掉另一个吧，做到相同浏览器中斜体显示一样，至于不同浏览器显示italic不同的问题，我们也无能为力。

 

3.字体变形font-varlant，默认normal。

可能的值：

normal：正常

small-caps：小个的大写字母

例如：h1 { font-varlant：small-caps；}

结果：

 

4.字体加粗font-weight，默认normal。

可能的值：

normal：默认值，定义标准的字符

bold：粗体

bolder：更粗，比继承的粗一号

lighter：更细，比继承的细一号

inherit：继承的粗细。

100 200 300 400 500 600 700 800 900：400=normal，700=bold

注1：若定义normal与不定义font-weight不一样，不定义font-weight时，粗细用继承的粗细。定义了normal就是400的粗细了。

注2：有的浏览器和字体不支持数字100-900，最好别用。

 

5.字体大小font-size

可能的值

描述

xx-small

x-small

small

medium

large

x-large

xx-large

把字体的尺寸设置为不同的尺寸，从 xx-small 到xx-large。

默认值：medium。这是绝对尺寸，由浏览器默认设置。

绝对字体尺寸和HTML标题标签的对应关系

绝对字体尺寸

xx-small

x-small

small

medium

large

x-large

xx-large

HTML标题标签

不确定，不同浏览器有不同

h4和p

不确定，不同浏览器有不同

大多数浏览器

16px

后者比前者大20%（CSS2），大50%（CSS1），不同的浏览器支持的CSS版本不同，结果会不同，但大多数浏览器的默认设置（medium和100%即h4和p）是16px。

smaller

把 font-size 设置为比父元素更小的尺寸。

larger

把 font-size 设置为比父元素更大的尺寸。

length

把 font-size 设置为一个固定的值。如：font-size：16px；font-size：1em；

可能的值：参见链接CSS 4.2样式-文本补充，css中的长度单位

%

把 font-size 设置为基于父元素的一个百分比值。

inherit

规定应该从父元素继承字体尺寸。

注1：em和%是做同一件事的两种不同方式，没有什么不同。

注2：像素数字后必须紧跟单位，不能有空格。如2 px错误写法。12px代表的意义：文本高12像素。

注3：

大多数浏览器默认文本大小（meidium和h4和p）是16px，所以在大多数浏览器中均有效的方案是：

在body中设置一个大小，其他均与body成比例设置。

body { font-size：100%或medium；}      

h1 { font-size：3.75em或375%；}

h2 { font-size：2.5em或250%；}

p { font-size：0.875em或87.5%；}

解释：

body（父元素）以百分比设置默认的font-size值，这里是16px，可以是125%，20px。

3.75em=3.75*16=60；2.5em=2.5*16=40；0.875em=0.875*16=14。

应该说body设置为死的，确定的，与浏览器无关的是最好的。如16px，2mm等。

但是由于IE浏览器在字体尺寸设置为像素大小时，缩放时不能更改大小，所以不能用。