跳到主要内容

简介

@font-face 属性不仅可以用于显示服务器端的字体，也可以用来显示客户端本地的字体。

举个例子来说，在客户端本地已经安装了 Arial 字体系列（ font-family ）。 Arial 字体系列由以下几个字体组成。

  • Arial
  • Arial Italic
  • Arial Bold
  • Arial Bold Italic
  • Arial Black

在浏览器中，当使用 Arial 字体系列显示文字的正体与粗体时，分别使用 Arial 字体与 Arial Bold 字体。但是，可以通过书写样式代码的方式让浏览器在显示粗体时使用 Arial Black 字体。另外，使用 @font-face 属性显示客户端本地的字体时，需要将字体文件路径的 URL 属性值修改为" local （）"形式的属性值，并且在" local "后面的括号中写入使用的字体。

font-size-adjust​

font-size-adjust 属性的使用方法很简单，但是它需要使用每个字体种类自带的一个 aspect 值（比例值）。

aspect 值可以用来在将字体修改为其它字体时保持字体大小基本不变。这个 aspect 值的计算方法为 x-height 值除以该字体的尺寸， x-height 值是指使用这个字体书写出来的小写 x 的高度（像素为单位）。如果某个字体的尺寸为 100px 时， x-height 值为 58 像素，则该字体的 aspect 值为 0.58 ，因为字体的 x-height 值总是随着字体的尺寸一起改变的，所以字体的 aspect 值都是一个常数。

字体种类aspect 值
Verdana0.58
Comic Sans MS0.54
Trebuchet MS0.53
Georgia0.5
Myriad Web0.48
Minion Web0.47
Times New Roman0.46
Gill Sans0.46
Bernhand Modern0.4
Caflisch Script Web0.37
Mjemish Script0.28

在 font-size-adjust 属性中指定 aspect 值并且将字体修改为其它字体后，浏览器对于修改后的字体尺寸的计算公式如下所示。

c = （ a/b ） s

其中， a 表示实际使用的字体的 aspect 值， b 表示修改前字体的 aspect 值， s 表示指定的字体尺寸， c 为浏览器实际显示时的字体尺寸。

如果想将 16px 的 Times New Roman 字体修改为 Comic Sans MS 字体，字体大小仍然保持 16px 的 Times New Roman 字体的大小，则需要执行如下步骤：

  • 查得 Times New Roman 字体的 aspect 值为 0.46
  • 查得 Comic Sans MS 字体的 aspect 值为 0.54
  • 将 0.54 除以 0.46 后得到近似值 1.17
  • 因为需要让浏览器实际显示的字体尺寸为 16px ，所以将 16 除以 1.17 ，得出大约 14px ，然后在样式中指定字体尺寸为 14px 。也就是说， 14px 的 Comic Sans MS 相当于 16px 的 Times New Roman 字体

最后要补充说明的是，在实际使用过程中，读者也可以根据需要对 aspect 值进行微调以达到最满意的效果，也可以将 font-size-adjust 属性的属性值设为" none "，设定为" none "的意思等同于不对 font-size-adjust 属性进行设置，按照字体原来的大小显示。

list-item 类型​

@font-face { <font-description>}

属性和取值如下：

  • font-family: 设置文本名称
  • font-style: 文本样式
  • font-variant: 文本是否大小写
  • font-weight: 文本粗细
  • font-stretch ：是否横向拉伸变形
  • font-size ：大小

字体图标​

使用 @font-fac 命令引入外部字体图标文件，然后定义几个字体图标，然后嵌入导航菜单项目中 。

嵌入外部字体的需求考虑带宽问题，因为一个中文字体小的几 M ，大的十几 M ，这么大的字体下载会出现延迟，同时服务器不忍受如此频繁的的申请下载。如果只想让图标用特殊字体，最好还是设计成图片。

EntypoRegular 字体​

显示比较神奇