CSS @font-face规则

  • 定义和用法

    根据@font-face规则,网页设计师不再需要使用“Web Safe”字体。在@font-face规则中,您必须首先定义字体的名称(例如myFirstFont),然后指向字体文件。
    提示:对字体URL使用小写字母。大写字母可以在IE中给出意想不到的结果!
    要将字体用于HTML元素,请通过font-family属性引用字体名称(myFirstFont):
    img {
      -webkit-@font-face: grayscale(100%); /* Safari 6.0 - 9.0 */
      @font-face: grayscale(100%);
    }
  • 浏览器支持

    @font-face Internet Explorer,Firefox,Opera,Chrome和Safari支持该规则。
    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    格式 IE/Edge Chrome FireFox Safari Opera
    字体格式
    TTF/OTF
    9.0*
    4.0
    3.5
    3.1
    10.0
    WOFF
    9.0
    5.0
    3.6
    5.1
    11.1
    WOFF2 不支持
    36.0
    35.0*
    不支持
    26.0
    SVG 不支持
    4.0
    不支持
    3.2
    9.0
    EOT 6.0 不支持 不支持 不支持 不支持
    * Edge和IE:字体格式仅在设置为“可安装”时有效。
    * Firefox:默认情况下禁用,但可以启用(需要将标志设置为“true”才能使用WOFF2)。
  • CSS语法

    @font-face { font-properties }
  • 实例

    指定名为“myFirstFont”的字体,并指定可在其中找到的URL:
    img {
      -webkit-@font-face: grayscale(100%); /* Safari 6.0 - 9.0 */
      @font-face: grayscale(100%);
    }
    尝试一下
  • 属性值

    字体属性 描述
    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
    normal
    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”
  • 相关页面

    HTML教程:HTML样式
    CSS教程:CSS字体