欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3 font-face使用

程序员文章站 2022-07-05 15:27:16
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。 通过 CSS3,web 设计师可以使用他们喜欢的任意字体。 当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。 您“自己的”的字体是在 CSS3 @font-fa ......

在 css3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 css3,web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 css3 @font-face 规则中定义的。

@font-face的语法规则:

   @font-face {
      font-family: <yourwebfontname>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
      [font-stretch: <stretch>];
      [unicode-range: <unicode-range>];
    }

font-family定义字体的名称,src用来指定字体文件地址,可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下:

 

描述符 描述
font-family name 必需。规定字体的名称。
src url 必需。定义字体文件的 url。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • ormal
  • italic
  • oblique
可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 unicode 字符范围。默认是 "u+0-10ffff"。

字体格式有太多选择,不幸的是始终没有一个能在所有的浏览器上通用。这意味着,你必须使用多种字体的方案来保持用户跨平台的一致性体验。当前,在web上使用各种不同字体格式有:ttf、otf、woff、eot 和 svg 。具体不同字体在各品牌浏览器的支持情况,这里不一一介绍。

在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。为了使@font-face达到更多的浏览器支持,paul irish写了一个独特的@font-face语法叫bulletproof @font-face:

  @font-face {
    font-family: 'yourwebfontname';
    src: url('yourwebfontname.eot') format('eot');/*ie*/
    src:url('yourwebfontname.woff') format('woff'), url('yourwebfontname.ttf') format('truetype');/*non-ie*/
  }

但为了让各多的浏览器支持,你也可以写成:

  @font-face {
    font-family: 'yourwebfontname';
    src: url('yourwebfontname.eot'); /* ie9 compat modes */
    src: url('yourwebfontname.eot?#iefix') format('embedded-opentype'), /* ie6-ie8 */
             url('yourwebfontname.woff') format('woff'), /* modern browsers */
             url('yourwebfontname.ttf')  format('truetype'), /* safari, android, ios */
             url('yourwebfontname.svg#yourwebfontname') format('svg'); /* legacy ios */
  }

使用@font-face定义自己的web字体如下:

@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'),
  url('../fonts/iconfont.svg#iconfont') format('svg');
}

 题外话

如何获取我们所需要的字体文件呢?其一,到付费网站购买字体;其二,到免费网站下载字体。当我们获取到字体,如何得到同一字体的.eot,.woff,.ttf,.svg字体格式。这里推荐一个网页工具,它能有效帮助我们生成不同字体格式文件。比如,我们手上已经有目标字体的ttf格式文件,上传该ttf文件,font squirrel便能帮我们方便地生成其他字体格式文件。关于font squirrel的具体使用,请参考的,这里不再赘述。