CSS Web字体

  • CSS @font-face规则

    Web字体允许Web设计人员使用未安装在用户计算机上的字体。当您找到/购买了您想要使用的字体时,只需在您的网络服务器上包含该字体文件,它将在需要时自动下载给用户。您的“自己的”字体在CSS @font-face规则中定义。
  • 不同的字体格式

    TrueType字体(TTF) TrueType是Apple和Microsoft在20世纪80年代后期开发的字体标准。TrueType是Mac OS和Microsoft Windows操作系统最常用的字体格式。 OpenType字体(OTF) OpenType是可伸缩计算机字体的格式。它基于TrueType构建,是Microsoft的注册商标。OpenType字体现在通常用于主要的计算机平台上。 Web开放字体格式(WOFF) WOFF是用于网页的字体格式。它是在2009年开发的,现在是W3C推荐标准。WOFF本质上是具有压缩和附加元数据的OpenType或TrueType。目标是通过带宽限制的网络支持从服务器到客户端的字体分发。 Web开放字体格式(WOFF 2.0) TrueType/OpenType字体,提供比WOFF 1.0更好的压缩。 SVG字体/形状 SVG字体允许在显示文本时将SVG用作字形。SVG 1.1规范定义了一个字体模块,允许在SVG文档中创建字体。您还可以将CSS应用于SVG文档,@font-face规则可以应用于SVG文档中的文本。 嵌入式OpenType字体(EOT) EOT字体是由Microsoft设计的OpenType字体的紧凑形式,用作网页上的嵌入字体。
  • 浏览器支持字体格式

    字体格式 Internet Explorer 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(含)以上 不支持 不支持 不支持 不支持
    * IE:字体格式仅在设置为“可安装”时有效。 * Firefox:默认情况下不支持,但可以启用(需要将标志设置为“true”才能使用WOFF2)。
  • 使用你想要的字体

    @font-face规则中; 首先定义字体的名称(例如myFirstFont),然后指向字体文件。
    @font-face {
         font-family: myFirstFont;
         src: url(sansation_light.woff);
       }
    
       div {
         font-family: myFirstFont;
       }
    尝试一下
  • 使用粗体文字

    您必须添加另一个@font-face包含粗体文本描述符的规则:
    @font-face {
         font-family: myFirstFont;
         src: url(sansation_bold.woff);
         font-weight: bold;
       }
    尝试一下
    文件“sansation_bold.woff”是另一个字体文件,其中包含Sansation字体的粗体字符。只要带有font-family“myFirstFont”的文本应该呈现为粗体,浏览器就会使用此功能。这样,您可以@font-face为同一种字体设置许多规则。
  • CSS字体描述符

    下表列出了可在@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 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样式