标签归档：font

除了标准字体描述符之外，CSS2还支持大量更为机密的描述符，它们可以进一步改善定义的字体。一般的页面设计师都不是非常需要这些描述符，但是更谨慎的印刷商则会发现它们非常有用处。 unicode-range描述符接受用逗号分开的Unicode值的列表，其中每个值都以U+开始，后面跟有一个十六进制的值。添加一个破折号和另外一个十六进制值，就可以指定值的范围，问号可用于匹配该位置的任何值。 unicode-range描述符的目的是精确地定义在字体中定义的字符glyph。如果文档中使用的字符不可用，浏览器就不会下载和使用该字体。例如，U+2A70的值表明字体中字体的哪个位置中包含glyph。使用U+2A7?可以代表2A70-2A7F范围内的字符，而U+2A70-2A9F则定义了更宽的范围。从很大程度上来说，这种描述符用来限制特殊符号字体的使用，它规定了只能使用字体定义的那些符号。 units-per-em描述符接受单个的数值，它定义了字体的em区域的大小。如果使用em单位为其他描述符指定了值，该值就非常重要(译注1)。 panose-1描述符接受用空格分开的10的倍数的整数值，这符合该字体的Panose-l描述。定义实际的Panose-1值方面的内容已经超出了本站所讲述的范围；对此感兴趣的您可以查阅Panose-1系统方面的存档，以了解更多信息。 stemv和stemh描述符定义了字体垂直和水平笔划的厚度，以em为单位。同样，cap-height和x_height描述符定义了字体中大写和小写glyph的高度。最后，agcent和descent描述符定义了整体的最大高度和深度。如果使用了其中任何一个描述符，还必须制定units-per-em描述符。 slope描述符定义了字体垂直笔划的范围。它对于匹配斜体字体方面非常重要。 baseline、centerline、mathline和topline描述符定义了字体的常规基线、中心基线、数学基线和顶部基线。它们都接受以em表示的数值。而且都要求我们也要指定units-per-em描述符。bbox描述符接受整两位坐标(x，y)对，用来指定字体边界框的左下角和右上角。 如果浏览器选择在该字体的基础上合成一个字体，bbox描述符就会非常重要。通过指定边界框的大小，我们就可以确保合成的字体所占据的空间正好如人所愿。 widths描述符接受用逗号分开的Unicode范围列表，其后跟有用空格分开的值，这些值定义了字符在indicated范围中的字符宽度。如果为某个范围提供了一个值，该范围内的所有字符就都有相同的宽度。多个值会分配给一个范围内的连续字符。 与bbox描述符类似，widths描述也用来确保合成字体及其被请求的副本之间的近似度。 最后，可选的definitions-src描述符提供了某文件的URL，该文件包含字体所用的全部描述符。如果您需要详细地定义某种字体，那么使用该描述符将会非常方便。与其在使用该字体的文档或样式表中包括这些冗长的描述符，不如在一个单独的文件中一次性定义描述符，然后使用definitons-src描述符引用该文件。 译注1：em是欧美文字排版的字行长单位，是给定尺寸的铅字所占有的表面积。例如，一个8点的铅字占有8点em的印刷面积。除了标准字体描述符之外，CSS2还支持大量更为机密的描述符，它们可以进一步改善定义的字体。一般的页面设计师都不是非常需要这些描述符，但是更谨慎的印刷商则会发现它们非常有用处。   unicode-range描述符接受用逗号分开的Unicode值的列表，其中每个值都以U+开始，后面跟有一个十六进制的值。   添加一个破折号和另外一个十六进制值，就可以指定值的范围，问号可用于匹配该位置的任何值。   unicode-range描述符的目的是精确地定义在字体中定义的字符glyph。如果文档中使用的字符不可用，浏览器就不会下载和使用该字体。   例如，U+2A70的值表明字体中字体的哪个位置中包含glyph。使用U+2A7?可以代表2A70-2A7F范围内的字符，而U+2A70-2A9F则定义了更宽的范围。   从很大程度上来说，这种描述符用来限制特殊符号字体的使用，它规定了只能使用字体定义的那些符号。   units-per-em描述符接受单个的数值，它定义了字体的em区域的大小。如果使用em单位为其他描述符指定了值，该值就非常重要(译注1)。 panose-1描述符接受用空格分开的10的倍数的整数值，这符合该字体的Panose-l描述。   定义实际的Panose-1值方面的内容已经超出了本站所讲述的范围；对此感兴趣的您可以查阅Panose-1系统方面的存档，以了解更多信息。   stemv和stemh描述符定义了字体垂直和水平笔划的厚度，以em为单位。同样，cap-height和x_height描述符定义了字体中大写和小写glyph的高度。   最后，agcent和descent描述符定义了整体的最大高度和深度。如果使用了其中任何一个描述符，还必须制定units-per-em描述符。   slope描述符定义了字体垂直笔划的范围。它对于匹配斜体字体方面非常重要。 baseline、centerline、mathline和topline描述符定义了字体的常规基线、中心基线、数学基线和顶部基线。它们都接受以em表示的数值。而且都要求我们也要指定units-per-em描述符。   bbox描述符接受整两位坐标(x，y)对，用来指定字体边界框的左下角和右上角。 如果浏览器选择在该字体的基础上合成一个字体，bbox描述符就会非常重要。通过指定边界框的大小，我们就可以确保合成的字体所占据的空间正好如人所愿。   widths描述符接受用逗号分开的Unicode范围列表，其后跟有用空格分开的值，这些值定义了字符在indicated范围中的字符宽度。 … 继续阅读 →

@font-face规则中的src描述符告诉浏览器要到哪里检索字体。对于可下载的字体来说，该描述符的值就是其文档URL，在CSS2语法中用url关键字表示。我们还可以用src引用在本地安装的字体(也就是存储在用户机器上的字体)，但是使用的关键字是local而不是src，而且要提供字体本地名称。 src描述符的值还可以是用逗号分开的位置列表。在我们前面的示例中，可能已经用到了： src: url(“http://www.jiecool.net/foundry/jiecool-sans”)，local(“Locida Sans”) 这行代码告诉浏览器尝试从jiecool.net上下载并使用jiecool Sans，如果无法下载使用，就查找本地安装的Lucida Sans的副本。 我们可以向浏览器提供一些暗示。CSS2在涉及到字体文件的格式时，提供了很大的灵活性。该标准认识到大量不同字体格式的存在，允许我们使用任何自己希望的格式，同时假定浏览器可以理解这些格式。如果要提供格式暗示，可以使用关键字format，后面跟有一个或多个格式名。例如： src: url(“http://www.jiecool.net/foundry/jiecool-sans”)format (“type-1″), local(“Lucida Sans”)format(“truetype”, “intellitype”) 在这种情况下，外部字体是Type 1格式，而Lucida Sans的本地版本可以是TureType和Intellifont两种格式。其他识别出来的字体格式包括truedoc-pfr、opentype、embedded-opentype、truetype-gx和speedo。

在@font-face规则中使用的基本字体描述符符合CSS2字体属性，接受的值也与那些属性相同。因此，可以使用font-family、font-style、font-variant、font-weight、font-stretch和font-size描述符及其相关的值，来定义浏览器可用的新字体。例如： @font-face{ font-family: “jiecool Sans”; font-style: normal, italic; src: url(“http://www.jiecool.net/foundry/jiecool.net-sans”) } 上述代码定义了一个名为jiecool的字体，从jiecool.net可以下载该字体。在下载的字体中，jiecool Sans的正常版本和斜体版本都可用。因为没有提供其他的字体描述符，浏览器会假设其他所有的字体属性(粗细、变体，等等)都可以在这种字体中得到满足。 一般来说，忽略字体描述符可以使浏览器匹配任何为该描述符提供的值。通过为字体描述符提供一个或多个值，就可以限制浏览器只匹配以后字体请求中的那些值，以便更好地确保浏览器以后能够很好地进行匹配。例如，如果字体不包含斜体版本而且没有告诉浏览器，那么浏览器在试图完成对该字体斜体样式的请求时，就会使用不正确的字体。

以前的级联样式表标准CSS1有个过于简单化的字体匹配算法：如果本地客户机的字体集中没有指定的字体，就会用一个一般字体代替。当然，对旅游网站制作出的效果看起来通常不会很好，而且可能会严重地破坏显示。与一般字体比起来，字体的替代品更多。CSS2标准极大地扩展了CSS1字体匹配样式，包括引进了新的@规则，这样作者就可以在自己的文档中定义、下载和使用新的字体了。 CSS2字体匹配步骤 CSS2字体匹配算法有4个步骤。第一步很简单，就是在用户机器上找到指定的字体，然后使用它；这可能是在样式表规则中指定的多个字体系列中的一个，其分列方式依据的是它们显示的顺序。 第二步是在用户机器上找不到规则中指定的字体时才采用，也就是让浏览器努力从类似的本地字体中找到相近的匹配项。例如，请求使用Helvetica时，可能最终使用的是Arial，因为它们是相似的sans-serif字体。 CSS2字体匹配算法中的第三步，是让浏览器尝试着合成字体，也就是采用某种本地字体，然后将其改变为与指定字体相匹配的字体。例如，请求使用72磅的Helvetica时，先采用本地12磅的Arial字体，然后按比例增加其大小以达到要求的字体大小。 如果这些努力都失败的话，倘若作者已经提供了合适的外部字体定义，浏览器就可以采取第四个步骤，下载需要的字体。这些外部的字体定义是用@font-face这种@规则创建的，它的常用语法为： @font-face { descriptor: value; descriptor: value } 这样，我们在旅游网站制作时每个@font-face规则都为浏览器定义了一个新的字体。随后对字体的请求可能会从这些新字体中得到满足。浏览器会使用多种描述符值，以确保提供的字体能够匹配请求的字体。

旅游网站建设过程中用好字体属性的font简写也是有助于我们简化CSS大小的条件之一。有时，我们会发现自己同时为一个标签的文本内容显示指定了多个与字体相关的属性。完整的字体规范使用起来可能有一些不便。例如： p {font-family: Times, Garamond, serif; font-wight:bold; font-size:12pt; line-height:14pt} 这时我们可以把上面这4行代码简写为： p {font: bold 12pt/14pt Times, Garamod, serif} 字体属性的分组和排序在font属性中是很重要的。必须首先指定字体样式、粗细和变体属性，其后是用斜杠符号分开的字体大小和行高，然后以字体系列列表结束。在所有属性中，字体大小和字体系列是必需的；其他的则可以省略。下面是更多font属性的示例： em{font: italic 14pt Times} h1 {font: 24pt/48pt sans-serif} code {font: 12pt Courier,monospace} 第一个示例告诉能够识别样式的浏览器，要用14磅、斜体的Times样式来强调<em>文本。 第二条规则用最粗的24磅sans-serif字体来显示<h1>文本，而且文本的行距也为24磅。最后，<code>标签内的文本被设置为12磅的Courier字体，或是浏览器定义的等宽字体。 关于字体样式可以实现的效果，则留给您自己去想像了。也许最新一期的Wired杂志在这方面会有所帮助，可以找到比较前卫的字体和其他与输出有关的用法。

1、font-style属性 使用font-style属性可使文本倾斜。默认样式为normal，可以改变成italic或oblique。例如：h2 {font-style: italic} 将以斜体显示所有二级标题的文字。Netscape 4只支持italic作为font-style属性的值；Netscape 6和Internet Explorer 4及其以后版本则支持这两个值，然而通常很难区分italic和oblique。 2、font-variant属性 使用font-variant属性可以选择所需字体的某种变形。这个属性的默认值是normal，表示字体的常规版本。也可以指定small-caps来选择字体的一个版本，在这个版本中，小写字母都会被替换为小的大写字母。 Netscape 6和Internet Explorer 6支持这个属性；Internet Explorer版本4和5则不能正确地将small-caps都显示为大写字母。 3、font-weight属性 font-weight属性控制着书写字母的粗细。这个属性的默认值是normal。也可以指定bold来得到字体的粗体版本，或者使用bolder和lighter值来得到比父元素字体更粗或更细的版本。 要指定细或粗的不同等级，可以将值设置为100(最细)到900(最粗)之间100的倍数。值400等于字体的normal版本，而700就与指定为bold的效果一样。Internet Explorer和Netscape 6都支持这个属性。

如果没有过多的细节，字体的易读性和显示大小主要依靠它的“纵横比(aspectratio)”：也就是其显示大小相对于x-height的比例，其中x-height是字体小写字形高度的测量值。纵横比接近1.0的字体与纵横比接近0的字体相比，前者更容易阅读。 同时，由于纵横比的影响，一种字体的实际显示大小可能会明显大于或小于同一大小的其他字体。因此，当一种字体不能用来显示时，替代字体可能会歪曲所要表达的意思。 font-size-adjust属性允许我们重新调整替代字体的纵横比，这样它可以更符合显示效果。使用属性值none可忽略纵横比。要不然就包含所需要的纵横比(一个小于1的十进制值)，一般情况下是首选显示字体的纵横比。然后，能够识别样式的浏览器将会以指定的纵横比计算和显示替代字体的大小：s=(n/a)*fs其中“s”是显示替代字体时新的计算机字体大小，其计算方法如下：font-size adjust的值“n”除以替代字体的纵横比“a”，乘以当前字体大小“fs”。 例如，让我们想像一下，首选字体是纵横比为0.45的Tinies New Roman。如果该字体目前不可用，浏览器会替换为纵横比为0.54的Comic Sans MS字体。这次替换几乎保持了相同的字体显示大小——假设为18-px大小，而font-size-adjust属性被设置为0.45，兼容CSS2的浏览器将以替代的Comic Sans MS字体显示或打印文本，其字体大小相对于18px小一些，为(0.45/0.54 x 18px)=15px。 同样，和css字体属性font-stretch一样比较遗憾的是我们无法在目前的流行浏览器使用。因为它们不支持这个属性。

除大小不同之外，字体系列有时会包含压缩和扩展版本，在这两种版本中，字符分别被进行了挤压或扩展。使用font-stretch属性便可以从字体中选择更宽或更窄的字符。 使用normal属性值则可以选择正常大小的字体。相对值wider和narrower会分别使字体字符宽一号或者窄一号，但不能超过字体系列中最宽或最窄的字体。 font-stretch其余的属性值选择了字体系列中的特定变化。从最窄的字体开始到最宽的字体结束，这些值分别是：ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded和ultra-expanded。 当然，font-stretch属性假设用户的显示字体支持可扩展字体。即使这样，目前大部份的浏览器仍会忽略这个属性，所以在旅游网站建设中也很少使用到。

font-size属性允许我们在旅游网站建设中使用相对或绝对长度值、百分比及关键字来定义字体大小。（注：长度值与百分比相关解释可以参考css关键字和长度属性值 与css百分比与URL属性值） 例如： p{font-size:12pt} p{font-size:120%} p{font-size:+2pt} p{font-size:medium} p{font-size:larger} 在旅游网站建设实例中，第一条规则很可能是最常用的，因为大家最熟悉它了：它将文档段落中所含文本的字体大小设置为特定的磅数(在此例中是12)。第二条规则将字体大小设置为比父元素字体的大小大20%。第三条规则比正常字体大小大2磅。 第四条规则选择的是浏览器预先定义的一种字体大小，用medium关键字来标识。有效的绝对大小关键字是xx-small、x-small、small、medium、large、x-large和xx-large，通常与<font>标签中size属性的7种字体大小相对应。 最后一条font-size规则选择了比父元素所用字体大一号的字体。这样，如果正常大小是medium，就要改变为large。也可以指定smaller来得到期望的结果。 目前的大部份浏览器都不能正确处理增大的字体。准确地说，它们会忽略加、减号，只用它的绝对值作为大小。因此，对于本文中的那个示例来说，最终的字体大小是2磅，而不是比正常大小大两磅。在旅游网站建设过程中除了第一个规则使用的p{font-size:12pt}，还比较常用的是用像素(px)，如：p{font-size:24px;}

font-family(字体系列)属性采纳的是以逗号分开的字体名称列表。浏览器使用列表中命名的第一种字体在客户端机器上显示文字，当然，这种字体必须已经安装在该机器上，而且可以使用。 字体名称值是专用于字体样式的，例如Helvetica或Courier或CSS2标准定义的一般字体样式：serif、sans-serif、cursive、fantasy或monospace。浏览器为每种一般字体都定义了实际使用的字体名称。例如，Courier是等宽字体最流行的选择。 由于字体根据浏览器的不同而有明显的变化，当指定一种字体样式时，应该总是提供多种选择，最后以一个台适的一般字体作为结束。例如： h1{font-family: Helevetica, Univers, sans-serif} 浏览器会根据上述代码查找和使用Helvetica字体，然后是Univers字体。如果这两种字体都不能在客户端显示，浏览器将使用一般的sans-serif字体。 对于诸如New Century Schoolbook中央含有空格的字体名称，要用引号括起来。例如： p {font-family:Times，”New Century Schoolbook”,Palatino,serif} 在使用内联样式时，多重的双引号会导致出现问题。因此，在内联样式中应该使用单引号标记： <p style=”font-family: Times, ‘New Century Schoolbook ‘, Palatino, serif”> 在实际使用中则不需要使用引号，因为字体名称值都是用逗号分开的，所以浏览器一般情况下都会忽略字体名称前后的空格。这样： P {font-family: Times, New Century Schoolbook, Palatino, serif} <p style=”font-family: Times, New Century Schoolbook, … 继续阅读 →