CSS如何使用Web字体?详细代码示例

2021年3月20日15:47:14 发表评论 1,129 次浏览

Web字体用于允许使用CSS中未在本地系统上安装的字体。选择未安装的字体后, 只需将字体文件包含在Web服务器上, 它将在需要时自动下载。

语法如下:

@font-face {
    font details
}

字体格式的类型:下面列出了许多类型的字体格式:

  • TrueType字体(TTF):无论使用Microsoft操作系统还是Mac操作系统, 最常用的字体格式是TrueType。这是Microsoft和Apple在1980年代后期开发的字体标准。 TrueType字体将每个字形描述为一组路径。路径表示使用点和特定数学指定的闭合曲线。例如, 小写字母" i"有两条路径, 一条用于点, 另一条用于其余路径。像素用于填充路径以创建最终的字母形式。 TrueType字体格式的优点是字形是可缩放的, 这意味着可以将其设置为任意比例和任意大小。
  • OpenType字体(OTF):OpenType是一种基于TrueType的字体格式。 OpenType字体格式由Microsoft和Adobe开发, 但是是Microsoft的注册商标。 OpenType字体中的布局功能是按脚本和语言组织的, 这允许单个字体在同一脚本中支持多个书写系统。 OpenType字体格式旨在实现更好地保护字体数据, 更广泛的跨平台支持等目标。
  • Web开放字体格式(WOFF):WOFF是Mozilla在2009年与Type Supply, LettError和其他组织合作开发的网页中使用的一种字体格式。 WOFF基本上是具有压缩和其他元数据的OpenType或TrueType。 WOFF的目标是通过带宽限制支持通过网络从服务器到客户端的字体分发。 WOFF有两种版本, 分别是WOFF和WOFF2, 它们在使用的压缩算法方面大不相同。它们分别由" woff"和" woff2"格式描述符描述。
  • SVG字体/形状:SVG代表可缩放矢量图形。最初指定SVG时, 大多数网络浏览器并不完全支持网络字体。但是为了正确呈现文本, 后来在SVG中添加了字体描述技术来提供此功能。它提供了在渲染时将字形信息嵌入到SVG中的方法。
  • 嵌入式OpenType字体(EOT):嵌入式OpenType文件格式由Microsoft开发。 EOT字体是OpenType字体的紧凑形式, 可用作网页上的嵌入式字体。它的设计目的是使TrueType和OpenType字体可以链接到网页, 以供下载, 以根据用户要求使用该字体呈现网页。

字体描述符:描述符可以在@ font-face规则内定义。现在我们将解释字体描述符的不同类型。

  • 字体系列:用于定义字体名称。 Web字体必须运行。
  • src:它用于定义从中获取字体的URL。像字体家族一样, 也需要src。除了这两个字段外, 其余描述符都是可选的。
  • 字体拉伸:它用于查找应如何扩展字体。正常是默认情况下采用的值。不同的字体拉伸值是正常, 压缩, 半压缩, 超压缩, 超压缩, 扩展, 半扩展, 超扩展和最后超扩展。
  • 字体样式:它用于定义不同样式的字体。可以设置的不同样式是倾斜的, 默认样式是正常。
  • 字体粗细:可以使用此描述符定义字体的粗细。 font-weight的默认值为" normal"。粗体的不同值是正常, 粗体, 我们还可以给出100到900之间的数值, 以100为增量。

范例1:此示例说明了网络字体的用法。

<!DOCTYPE html>
< html >
      
< head >
     < style > 
         @font-face{
             font-family: monospace;
             src:url(sansation_light.woff);
         }
          
         /* Sets  font family to monospace */
         * {
         font-family: monospace; 
         }
     </ style >
</ head >
  
< body >
     < div >
         < h1 >lsbin</ h1 >
          
         < p >A computer science portal for geeks.</ p >
     </ div >
      
     < h1 >Great Geek's font face example.</ h1 >
</ body >
  
</ html >

输出如下:

CSS Web字体1

范例2:此示例说明了网络字体的用法。

<!DOCTYPE html>
< html >
      
< head >
     < style > 
         @font-face{
                  
             /* Set font family to monospace */
             font-family:monospace; 
             src:url(sansation_light.woff);
         }
          
         * {
             font-family:monospace;
              
             /** font style to italic */
             font-style:italic;
             font-weight:bold; 
         }
     </ style >
</ head >
  
< body >
     < div >
         < h1 >lsbin</ h1 >
         < p >A computer science portal for geeks.</ p >
     </ div >
      
     < h1 >Great Geek's font face example.</ h1 >
</ body >
  
</ html >

输出如下:

CSS Web字体2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: