阅读(38)

CSS3 Web字体

最后一次修改 2017年08月04日


@font-face CSS3 at-rule允许我们指定在线字体来显示网页上的文本。

@font-face消除了对访问者计算机上安装的字体的依赖。

例子

此示例简单地指定要使用的可下载字体,将其应用于文档的整个主体。

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

上面的代码呈现如下:

下载字体

注意

Web字体受到相同的域限制。

字体文件必须与使用它们的页面在同一个域上,除非使用HTTP访问控制来放宽此限制。