我们都知道，每个人电脑装的字体都是不太一样的。下面这句代码表示p元素优先使用Arial字体来显示，如果你的电脑没有装Arial字体，那就接着考虑Verdana字体。如果你的电脑还是没有装Verdana字体，那就再接着考虑
Georgia字体……以此类推。
p{font-family: Arial, Verdana, Georgia;}
那么如果想要使得所有用户的电脑上都能正常显示某一种字体，应该怎么做呢？此时就需要用到这一节介绍的嵌入字体了。所谓“嵌入字体”，指的是把服务器中的字体文件下载到本地电脑，然后让浏览器端可以显示用户电脑没有安装的字体。说白了，就是给你的电脑安装某一种字体。
在CSS3中，我们可以使用@font-face方法来加载服务器端的字体，从而使得所有用户都能正常显示该字体。
语法：
@font-face
{
font-family: 字体名称;
src:url(文件路径);
}
说明：
font-family属性用于定义字体的名称，src属性中的“文件路径”指的是服务器端中字体文件的路径
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义字体*/
@font-face
{
font-family: myfont; /*定义字体名称为myfont*/
src: url("css/font/Horst-Blackletter.ttf");
}
div
{
font-family:myfont; /*使用自定义的myfont字体*/
font-size:60px;
background-color:#ECE2D6;
color:#626C3D;
padding:20px;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</html>
浏览器预览效果如下图所示。
分析：
在这个例子中，我们使用@font-face方法来定义了一个名为“myfont”的字体，然后在div元素中使用font-family属性来使用myfont字体。通过这种方式，我们就可以使得所有用户的浏览器都能够显示相同的字体效果。
从这个例子我们可以总结一下，如果想要实现嵌入字体，一般需要以下两步。
①使用@font-face定义字体。
②使用font-family引用字体。
有一点要特别注意，我们并不建议使用@font-face来实现嵌入中文字体。这是因为中文字体文件大多数都是10MB以上。这么大的字体文件，会严重影响页面的加载速度，导致用户体验非常差。不过对于英文字体来说，字体文件往往只有几十KB，非常适合使用@font-face。之所以中文字体文件大，而英文字体文件小，原因很简单：常用中文有几千个汉字，而英文却只有26个字母！
实际上，@font-face方法不仅可以用于嵌入字体，最重要的还可以实现字体图标技术（即iconfont）。对于字体图标技术，小伙伴们可以去看一下《从0到1：CSS进阶之旅》这本书中的相关章节。
