使用font-face改变字体即加载外部字体

使用@font-face规则可以在网页中加载外部字体，从而改变网页中的文本字体，并且让文本在任何设备上都显示一致。以下是使用@font-face规则加载外部字体的完整攻略：

步骤一：选择字体文件

选择适合自己网站风格的字体文件，并确保其版权合法。常见的字体类型有TTF、OTF、WOFF等。

步骤二：在样式表中声明@font-face规则

在网站样式表中声明@font-face规则，语法如下：

@font-face {
  font-family: 'MyWebFont';  /* 定义字体名称 */
  src: url('MyWebFont.woff2') format('woff2'),
       url('MyWebFont.woff') format('woff');
  font-weight: normal;  /* 字体粗细 */
  font-style: normal;   /* 字体样式 */
}

其中，font-family为自定义的字体名称，src为字体文件的URL地址，format为字体文件的格式，font-weight为字体的粗细度，font-style为字体的样式，如斜体等。

步骤三：应用字体到网页中的元素

将字体应用到网页中的元素中，语法如下：

body {
  font-family: 'MyWebFont', sans-serif;
}

其中，font-family设置为自定义的字体名称。

示例1：字体文件为woff格式

@font-face {
  font-family: 'Lobster';
  src: url('Lobster.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'Lobster', sans-serif;
}

在上述示例中，定义一个名为'Lobster'的字体，指定字体文件为Lobster.woff，并将其应用到h1元素中。

示例2：字体文件为woff2格式

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans.woff2') format('woff2'),
       url('OpenSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Open Sans', sans-serif;
}

在上述示例中，定义一个名为'Open Sans'的字体，指定字体文件为OpenSans.woff2，并将其应用到body元素中。

注意：在现代浏览器中，woff2是更高效、更快速的字体格式，建议使用woff2格式。