@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访问控制来放宽此限制。