如何在 CSS 中使用网页字体？

在设计网页时，开发人员会根据文本所代表的内容以及最适合的字体使用不同的字体。每个系统都预装了一些字体，称为系统字体。由于这些是有限的，人们可能会遇到需要使用不同于预安装字体的其他字体。在本文中，我们将讨论如何在 CSS 中使用 web-fonts。使用网络字体允许开发人员使用字体而无需实际下载或安装这些字体到他们的系统中。

方法 1：如果您希望使用可通过CDN获得的字体(例如 Google 字体)，那么您只需选择所需的字体系列并使用标签或@import规则即可。

示例：假设我们希望使用 Google 字体中的字体系列“Redressed”，那么我们的 HTML 代码应如下所示。

HTML

  
    
  
    
    
  
    
    
    
  
  
    
GeeksforGeeks
  

输出：

在这里，我们也可以在 CSS 中使用 @import 规则。然后CSS文件看起来像。

@import url(‘https://fonts.googleapis.com/css2?family=Redressed&display=swap’);

#mainh1{
color: green;
font-family: ‘Redressed’, cursive;
}

注意：现在我们的 HTML 中的字体不需要 标签。我们将在两种方法中获得相同的输出。

方法二：找到想要的字体后，我们也可以在CSS文件的开头使用@font-face。假设我们有字体 URL 并且我们想在我们的项目中使用它，那么我们可以将以下代码块添加到我们的 CSS 中：

@font-face {
  font-family: "exampleFont";
  src: fontUrl("exampleFont.woff");
}

为了使用字体，我们可以简单地为我们想要以这种字体显示的所有元素定义 font-family 部分。

示例：现在我们将使用相同的字体，即“Redressed”，但使用@font-face 。我们的 HTML 代码将如下所示：

HTML

  
    
    
  
  
    
GeeksforGeeks
  

注意：您需要定义字体相对于其在 Web 服务器中的位置的路径。这里我们把字体文件和我们的HTML代码放在同一个目录下，直接写字体文件名。

输出：