如何使用 CSS 为同一种字体添加多个字体文件?

htmlcssweb developmentfront end technology更新于 2024/11/25 11:56:17

在设计网站时，字体排版对于打造美观易读的布局至关重要。然而，不同的浏览器和操作系统可能不支持相同的字体文件。为了确保您的网站在所有设备上都能正确显示，为同一种字体添加多个字体文件至关重要。在本文中，我们将介绍两种使用 CSS 为同一种字体添加多个字体文件的方法。

方法

我们将讨论三种使用 CSS 为同一种字体添加多个字体文件的方法。具体如下:

使用 @font-face 规则
使用 CSS3 的 @import 规则
使用 Web 字体服务

让我们通过示例和代码深入讨论每种方法。

方法 1:使用 @font-face 规则

使用 CSS 为同一字体添加多个字体文件的第一种方法是使用 @font-face 规则。此规则允许您从外部文件导入自定义字体，并将其应用于网页上的特定元素。

示例

在这里，我们将通过一个分步示例来实现此方法 -

步骤 1 - 使用文件资源管理器在项目目录中创建一个名为"fonts"的文件夹，并将字体文件上传到其中。确保包含不同的文件类型，例如 .ttf、.woff 和 .eot。

为了便于此示例，我们将使用 Google Fonts 中的 Sofia Sans 字体。

步骤 2 - 在您的 CSS (style.css) 文件中，使用 @font-face 规则导入字体文件。此规则的语法如下 -

@font-face {
      font-family: 'Sofia Sans';
      src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
      url('fonts/Sofia_Sans/OFL.txt') format('woff')
   }

步骤 3 − 使用 font-family 属性将导入的字体应用于网页上的特定元素。

h1, h2 {
    font-family: 'Sofia Sans', sans-serif
}

步骤 4 − 最终代码如下所示 −

index.html 文件 −

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Fonts Example</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <h2>This font is called Sofia Sans</h2>
</body>
</html>

font.css 文件 −

@font-face {
   font-family: 'Sofia Sans';
   src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
   url('fonts/Sofia_Sans/OFL.txt') format('woff')
}

style.css 文件 −

h1, h2 {
      font-family: 'Sofia Sans', sans-serif
   }

方法 2:使用 CSS3 的 @import 规则

使用 CSS 为同一字体添加多个字体文件的第二种方法是使用 @import 规则。此规则允许您从外部位置导入 CSS 文件并将其应用到您的网页。

示例

在这里，我们将通过一个分步示例来实现此方法 -

步骤 1 - 使用文件资源管理器在您的项目目录中创建一个名为"fonts"的文件夹，并将您的字体文件上传到该文件夹。确保包含不同的文件类型，例如 .ttf、.woff 和 .eot。

为了便于示例，我们将使用 Google Fonts 中的 Sofia Sans 字体。

步骤 2 − 在"fonts"文件夹中创建一个名为"fonts.css"的新 CSS 文件，并使用 @font-face 规则导入字体文件。

@font-face {
   font-family: 'Sofia Sans';
   src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
   url('fonts/Sofia_Sans/OFL.txt') format('woff')
}

步骤 3 − 在您的主 CSS (style.css) 文件中，使用 @import 规则导入"fonts.css"文件。

@import url('fonts.css');

步骤 4 − 使用 font-family 属性将导入的字体应用于网页上的特定元素。

h1, h2 {
    font-family: 'Sofia Sans', sans-serif
}

步骤 5 − 单个 HTML 文件和两个 CSS 文件中的最终代码如下所示 −

index.html 文件 −

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Fonts Example</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <h2>This font is called Sofia Sans</h2>
</body>
</html>

style.css 文件 −

@import url('fonts.css');
h1, h2 {
   font-family: 'Sofia Sans', sans-serif
}

fonts.css 文件 −

@font-face {
   font-family: 'Sofia Sans';
   src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
   url('fonts/Sofia_Sans/OFL.txt') format('woff')
}

方法 3:使用 Web 字体服务

另一种使用 CSS 为同一字体添加多个字体文件的方法是使用 Web 字体服务。这些服务(例如 Google Fonts 或 Adobe Fonts)允许您轻松地在您的网站上导入和使用各种字体，而无需自行托管文件。

示例

在这里，我们将通过一个分步示例来实现此方法 -

步骤 1 - 转到 Google Fonts 或 Adobe Fonts 等网络字体服务，然后选择所需的字体。

为了便于此示例，我们将使用 Google Fonts 中的 Sofia Sans 字体。

步骤 2 - 点击字体名称旁边的"+"图标，选择您想要添加到网页的字体。

步骤 3 − 打开右上角的"查看所选字体系列"图标，并使用 font-family 属性将导入的字体应用于网页上的特定元素，方法是将预连接和样式表链接添加到 index.html 文件。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@100;200&display=swap" rel="stylesheet">
h1, h2 {
    font-family: 'Sofia Sans', sans-serif;
}

步骤 4 − 单个 HTML 文件中的最终代码如下所示 −

示例

<!DOCTYPE html>
<html>
<head>
   <title>Font Example</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@100;200&display=swap" rel="stylesheet">
   <style>
      h1, h2 {
         font-family: 'Sofia Sans', sans-serif;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorials Point!</h1>
</body>
</html>

注意 - 此方法简化了添加多个字体文件的过程，因为网络字体服务会为您处理该过程，您只需使用该服务提供的链接或 CSS 文件导入字体即可。

结论

在本文中，我们讨论了如何使用 CSS 为同一字体添加多个字体文件的不同方法。第一种方法是使用 @font-face 规则，该规则允许您从外部文件导入自定义字体并将其应用于网页上的特定元素。第二种方法是使用 CSS3 的 @import 规则，该规则允许您从外部位置导入 CSS 文件并将其应用于网页;第三种方法是使用像 Google Fonts 这样的网络字体服务来轻松完成这项工作。