CSS的字体样式

2005-12-17 665 0

在网上应用CSS技术最多的,就是字体样式控制方面。CSS样式表在字体的控制方面远远要比HTML强,而且还可以跨越浏览器的界线。
 ● 1.按照字体名称调用字体 (字体名称的属性是:font-family)
  看了这个标题,有些朋友可能认为,“本身HTML都可以设置字体啦”,对!但如果浏览网页的用户没有你设置的那种字体怎么办呢?还记得我们的中文内码问题吗?GB2312,当我们定义了主页内码为GB2312后,虽然解决了中文字符自动换行的问题,但是页面里所有的英文都只能用宋体字库的英文显示,即使我们定义了页面里的英文用其它英文字体显示,但最后的结果是没有任何作用。该项属性功能可以跨越不同的浏览器(首要条件当然是支持CSS),不同的系统,即使在用GB2312内码的页面中,你都可以定义页面中的英文字体。
  你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就行了吗?
  很可惜,事情还不是这么简单,字体在各个操作平台之上叫的名称可能会有变化。比如,Courier在MAC机上叫做Courier New。在一台机器上可能叫Italic的字体在另一台机器上可能就叫做Oblique。你仔细研究之后会发现更多的这样的例子。
  所以,我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必须确定使你所用的字体名称就是计算机所以的字体名称。
  那么你怎么确定计算机对一种字体的确切名称是什么呢?这取决于于计算机所用的操作平台。
  Windows的用户:使用应用软件比如word中的字体菜单中所列出的确切的字体名称。
  Mac机用户:不要相信应用软件给你列出的字体名称。而应该打开你的system folder,按照其中对字体的拼写在你的样式表中使用字体名称。
  字模系列:字模系列就是CSS中称呼一种字体的名称属性。其基本语法示例如下:
    H2 { font-family: helvetica,impact, sans-serif }
  这里是Web浏览器阐释样式表的规则:首先在列表中寻找字体的名称(helvetica),如果在该计算机中安装了这种字体,就使用它。如果没有安装,则移向下一种字体(impact),如果这种字体也没有安装,则移向第3种字体(sans-serif)。sans-serif字体参数是浏览器可以依据的最后一种参数,它告诉浏览器使用任何一种缺省sans-serif字体(或许就是Arial)。
  以下为你所用浏览器的实际显示结果:
CSS font control is peachy.
  你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时,这样做无疑是一种好办法。注意:浏览器更倾向于认可小写的名称。当然,只用你对所有项目都进行了测试,就不会有问题。
  每次将一种generic字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几种:
serif (也可能是 Times)
sans-serif (也可能是 Arial或者 Helvetica)
cursive (也可能是 Comic Sans)
fantasy (也可能是 Ransom)
monospace (也可能是 Courier)
(注意:Netsacpe Communicator不支持Cursive或者fantasy)
  其它字体名称诀窍:
如果一种字体的名称不只一个单词,如Gill Sans,在你的CSS代码中用引号包含该字体的名称。
BODY { font-family: "gill sans", "new baskerville", serif }
行内加入的CSS规则,使用单引号:

Text goes here.


如果你将CSS规则的说明组合在一起,而其中又包含字模系列,将字模系列列在最后,例:
H2 { color: red; margin: 10px; font-family: times, serif }
有时候,如果字模系列没有列在最后一条,IE 3 会忽略整个一条CSS规则,很莫名其妙,但却是真的。
  利用字模系列属性,你可以按照字体名称调用字体,而且在使用标签时将拥有更大的灵活性。
 ● 2.字号(字体大小)的控制 (字体大小的属性是:font-size)
  初认识HTML的朋友可能会觉得很奇怪,为什么HTML只能定义7种字号显示呢?HTML标准的创造者为什么不加多些字号控制显示呢?这个我也不知道,我只是知道使用CSS样式表,你可以对文字的尺寸进行无限的控制。
  确定字体大小的3种基本方法:长度单位、关键字、比例参数。
  样式表可以识别许多种确定一种要素尺寸的不同单位:Points,Ems,Pixels,及其它单位。
  points是确定文字尺寸非常好的单位,因为它在所有的浏览器和操作平台上都适用,建议各位使用此单位做字号的单位。你需要留意的就是在缺省设置下,PC机中显示的字要比MAC机中显示的大一些。还有一点要注意的是,在中文字体方面 Internet Explorer 4 和 Netscape Communicator支持的不是太完美,只有12pt和9pt在两种浏览器中显示的比较正常(IE显示的很好,字体边缘很圆滑),若其他尺寸,则中文字的边缘布满锯齿,非常难看。
  em单位相对于实际字体的磅值来定义长度:这样,如果现在的字体大小为12pt,那么1.5em=18pt。
  从网页设计的角度来说,pixel(象素)是一个非常熟悉的单位,它最大的优点就在于所有的操作平台都支持pixel单位(而对于其它的单位来说,PC机的文字总是显得比MAC机中大一些。
  如果上述单位仍然不符合你的要求,请试试这些单位:in(英寸)、cm(厘米)、mm(毫米)、pc(打字机字型尺寸单位)、ex(x-height)。
  关键字:如果你不喜欢使用这些单位,你还可以选择以关键字说明文字尺寸,例:P { font-size: large }。
  有7种关键字,相对应于font-size中所用的数字参数:xx-small、x-small、small、medium、large、x-large、xx-large。
  利用这些参数,Web浏览器可以自由决定每一种关键字所适合的尺寸。例如:在Netscape Communicator中x-large的尺寸为28points,而在IE 4(windows及MAC)中为24points,而在Win 95下的IE 3中为18points。
  还要两种相对尺寸关键字:smaller、larger。smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”,例如,如果large字号的文字应用smaller参数,则其字号变成了midium尺寸。larger参数的作用类似。(注意:IE 3不支持smaller或larger参数。)
  比例参数:设定文字尺寸的第3种办法就是使用比例参数,例:
    P { font-size: 15pt }
    B { font-size: 300% }
  这些规则的含义为:使所有包含在

中的的文字的尺寸为

尺寸设定值的3倍,即45points。比例参数常用于从母体要素继承的参数值。浏览器对比例参数比较挑剔,所以你必须经常测试。
  有了这么多的选择是不是很让人高兴呢?由于有了font-size属性,我们能够随意调整文字的尺寸,如同以下的例子所示:(每一个字母i都比前一个大5pt)
  i i i i i i i i i i i i i i
 ● 3.字体风格的控制 (字体风格的属性是:font-style)
  Font-style指定字体的倾斜特点。通常,字体有三种倾斜变体:正体(normal或roman),缺省的直立字体;一般斜体(oblique),基本上同正体,但转以一定角度;花斜(italic),斜而草,其中的一些字符造型与其它两种变体明显不同。
  CSS据此定义了三个font-style特性值:normal(正体),oblique(一般斜体),italic(花斜)。一条字体风格规则中只能指定一个字体风格。若所期望的字体风格不可用,CSS规范对此另有说明。
  还有许多有关字体风格的术语,它们大的等同于上面所提到的三个术语之一。例如,与normal等效的风格术语有roman、upright,与oblique等效的术语有oblique、slanted、incline,与italic等效的术语有italic、cursive、kursiv。
  当然,所要求的字体风格可能不可用,或因为它不可用——许多计算机仅有花斜或一般斜体,而不是两者都有;或因为所要求的字体不可用,而替代字体却不支持所要求的字体风格。遇到此种情况,该怎么办呢?CSS对此有规定:
  font-style:normal 选择正体(它总是可用的),这是缺省值。
  font-style:oblique 选择一般斜体。如果不可用,使用font-family声明中所列下一个字体的一般斜体;如果所有的一般斜体都不可用,使用正体。
  font-style:italic 选择花斜。如果花斜不可用,使用一般斜体;如果一般斜体不可用,使用正体。
 ● 4.字体粗细的控制 (字体粗细的属性是:font-weight)
  字体粗细(font-weight)定义字体笔划的粗细。通常,词“light(细)”、“regular(一般)”、“bold(粗)”、“black(黑)”用于指定某种字体变体的粗细。但实际所用的词和它们的含义随字体的不同而有很大的不同。如,一种字体族的“regular”可能和另一种字体族的“bold”具有相同的粗细程度。而且,并非所有的字体族都有着相同数量的粗细级数,一些字体仅支持四到五级,而有些字体却支持九级。
  这种不同也给样式表的设计带来了很大的问题,除了指定绝对粗细外,还需以尽可能与字体无关的方式去指定相对粗细(如lighter(较细)bolder(较粗))。这是因为作者从不能确定实际中什么字体能被使用,顾需要一种不管使用什么字体都能正确工作的方式去指定字体粗细。
  绝对字体粗细:CSS规范把绝对粗细定义为九级,对应于整数值100(最细)到900(最粗),每级相差100。实际中由这些数字表示的粗细程度随字体的不同而不同,但这种尺度保证了大值比小值粗或一样粗。因此500比400粗或一样粗。
  命名式字体粗细:除了数值式粗细外,CSS还支持两种命名式粗细:normal和bold。它们分别等同于数值式的400和700。多数情况下,不需要考虑太多的数值尺度,只需要简单使用这两种命名式粗细即可。
  当然,仅使用这两种粗细有时也是不够的。为了实现细微的字体控制,需要正确地把有关字体粗细的描述转化为相应的CSS数值。这是非常难的,不是所有的字体都支持那九个数值,而且不同的字体采用不同的粗细定义。下面讲述怎样正确转化为相应的CSS数值。
  支持九级的字体:有些字体的粗细可明显分为九级,从而每一级都可直接于CSS粗细值对应,最细的为100,最粗的为900。因此,如果想使用可支持九级的字体的第六个值,可以用
    font-weight:600;
  OpenType(计划合并TrueType和PostScript Type 3 可缩放字体格式)字体支持九级粗细,但它只是一种计划中的字体格式,尚未应用。
  不支持九级的字体:多数字体的粗细不能分为九级,而且还常常使用令人迷惑的名称来表示粗细程度。这就需要样式表作者把这些名称对应为正确的CSS数值。接下来,浏览器再把这些CSS数值转化成相应的粗细——或所期望的字体不可用时,替代字体的正确粗细。转化过程采用了一种很复杂的算法,CSS规范中专有一部分说明它。幸运的是,样式表作者不需要知道这个算法。但不幸的是,作者必须知道决定CSS数值过程的正确步骤,而这又是很复杂的。正确步骤如下:
如果字体被标记为“book”、“regular”、“roman”或“normal”,那么其粗细值应为400。值400对应于字体的标准粗细。
如果有字体被标记为“medium”,而且第1步已执行,那么标记为“medium”的字体其粗细值为500。如果第1步没有执行,其粗细值为400。
如果有字体被标记为“bold”,其粗细值应为700。如果没有字体被明确地标记为“bold”。但有一个或多个字体比值为400和/或500的字体粗,那么作者必须确定那一个字体的粗细对应于一般的“bold”字体,并指定其粗细值为700。
如果留有字体比“bold”字体还粗,按照粗细程度的增加,它们的粗细值分别为800和900。如果还有更粗的字体,它们的粗细值仍为900。例如,有标记为“bpld”、“very bold”、“super bold”和“super-duper bold”的几种字体,按照粗细程度的增加,它们的粗细值分别为700、800、900和900(最后两种字体为相同的值)。
如果留有字体比“bold”细,比“medium”粗,但所留字体比值为400的字体粗,那么这些字体的粗细值应为600,也可能是500(如果第2步没有把500赋给其它字体的话)。
如果有字体比“normal”细,按照粗细程度递减的顺序,它们的粗细值分别为300、200和100。
如果还有更细的字体,它们的粗细值为100。
  如果看了上面,你觉得有些迷惑,不必担心。上述7步可能是CSS样式表最复杂的一部分,其它都没有这么复杂。
最细 ←—————————————————————————————————————→ 最粗
Ultra Light Extra Light Light Thin Book
Regular
Roman
Normal Medium Semi
Semi-bold
Demi
Demi-bold Bold Heavy
Black Extra
Black
Super
Ultra
100 200 300 400 500 600 700 800 900
  上面的表格列出了许多用来描述字体粗细的术语,以及它们在粗细尺度中的相对位置,从最细的到最粗的。尽管这个表大多数情况下能满足实际的CSS顺序,但它并不总是如此。对于复杂的字体粗细定义,必须按照上面的步骤进行。
  相对字体粗细:绝对字体粗细很复杂,多数情况下应避免使用。通常,作者想指定的是相对于周围文本的粗细程度,如突出强调的文本或是具有醒目标记的文本。最好的办法是指定相对字体粗细:
    font-weight:lighter (a lighter-weight font)
    font-weight:bolder (a bolder-weight font)
  通过指定相对粗细,从原理上保证了浏览器选择更细或更粗一些的字体(只要是可用的话)。但另一方面,如果一种字体的粗细值为400,作者指定另一种字体的粗细值为500,并不能保证浏览器显示出来的字体更粗一些,因为值为500的字体可能和周围文本的粗细一样。
  实际中,相对粗细的作用并非很大,这常常是因为没有“lighter”和“bolder”字体可用。还应注意,这些font-weight特性值在 MSIE 3 中根本不工作。
 ● 5.字体变体的控制 (字体大小的属性是:font-variant)
  字体变体(Font-variant)指定与字体族、字体风格和字体粗细无关,但与显示有关的变体。CSS仅支持以下两种变体值:
  font-variant:normal;——选择正常字体(它总是可用的),这是缺省值。
  font-variant:small-caps;——原为小写的字母显示为大写,但字符尺寸相对较小。如果这种变体不可用,原为小写的字母仍为小写。
  还有很多变体,如 outline 和 shadowed,但当前的CSS无法使用这些变体。
 ● 6.所有字体特性的控制 (字体控制的属性是:font)
  所有的字体特征——风格、粗细、字体族、变体和尺寸——可以组合到一起,用一句font特性声明便可指定。Font特性也包括 line-height 特性值(用于定义行间距)。Font的值就是上述六个特性值的集合——各特性值之间以空格分开,且无顺序之分。但有一点需要特别注意,那就是font-size 和 line-height 特性值必须以“size/height”的形式组合,其中 size 为任意有效的 font-size 值,height 为任意有效的 line-height 值。行高可以在没有字体大小的情况下给出,反之亦然。
  Font特性的一般形式如下:
    font:font-style font-variant font-weight font-size/line-height font-family

相关文章

快速配置反代
复活几万块买的斐讯R1
docker 下操作 mysql
解决服务器安装宝塔面板后, mysql状态页为空, 性能调整无法设置.
macOS 突然无法播放音视频了
homebrew 报错: homebrew-core is a shallow clone.

发布评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据