Web字体在CSS中的使用方法详解

一、选择正确的字体格式

为了在网页中使用Web字体，我们需要先选择正确的字体格式，通常有三种格式可选：TrueType（.ttf）、OpenType（.otf）和Web Open Font Format（.woff）。推荐使用woff格式，因为它是一种被广泛支持的格式，在大多数现代浏览器中都可以很好地使用。

在选择字体格式时，还需要考虑字体的版权问题，确保使用的字体具有商业使用授权或是可免费使用的开源授权，避免版权纠纷。

二、字体文件的引入方式

在选择了合适的字体文件后，我们需要将其引入到网页中。有两种常见的引入方式：

1. 使用@font-face声明

  
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}
  

在上面的代码中，我们使用@font-face声明了一个自定义的字体，指定了字体家族名称为"MyWebFont"，同时通过src属性指定了woff2和woff两种格式的字体文件路径。在使用时，只需要将字体家族名称作为CSS属性值即可。

2. 使用<link>标签引入外部字体

  
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
  

上面的代码中，我们使用<link>标签从外部资源库引入了Google Fonts中的一种字体，类似于使用CDN引入的方式。

三、在CSS中使用Web字体

引入字体文件后，我们需要在CSS样式中使用它们。下面是几种常见的方式：

1. 使用font-family属性

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

在上面的样式中，我们使用font-family属性指定了Web字体的家族名称，以及一个后备的sans-serif字体，当Web字体无法使用时，浏览器会自动使用后备字体。

2. 使用font-weight属性

  
h1 {
  font-family: 'MyWebFont', sans-serif;
  font-weight: 400;
}
  

在上面的样式中，我们使用font-weight属性指定了字体的粗细程度。通常情况下，Web字体提供了多个粗细程度的字形，我们可以根据需要进行选择。

3. 使用@font-face指定不同文字的字形

  
@font-face {
  font-family: 'MyWebFont-Regular';
  src: local('MyWebFont-Regular'), url('MyWebFont-Regular.woff') format('woff');
}

@font-face {
  font-family: 'MyWebFont-Bold';
  src: local('MyWebFont-Bold'), url('MyWebFont-Bold.woff') format('woff');
}

h1 {
  font-family: 'MyWebFont-Bold', sans-serif;
  font-weight: bold;
}
p {
  font-family: 'MyWebFont-Regular', sans-serif;
}
  

在上面的样式中，我们使用@font-face指定了两个字体家族名称，分别对应普通和加粗两种字形。在使用时，我们根据需要选择合适的字体家族名称和字体粗细程度即可。

四、使用字体图标

Web字体还可以用于制作字体图标。听起来比较玄乎，但其实很简单，只需要将字体文件中的字形定义为图标即可。下面是一个常见的字体图标库Font Awesome的使用示例：

在上面的代码中，我们使用了一个标签，并加上了fa、fa-star两个类名，这两个类名定义了应显示的字体图标。