在设计网站时，排版在创建美观且易于阅读的布局方面起着至关重要的作用。但是，不同的浏览器和操作系统可能不支持相同的字体文件。为确保在所有设备上都能正确显示，同一字体包含多个字体文件非常重要。在本文中，我们将讨论使用 CSS 为同一字体添加多个字体文件的几种方法。
方法
我们将讨论三种使用 CSS 为同一字体添加多个字体文件的方法。它们如下 –
- 使用@font-face 规则
- 使用 CSS3 的@import 规则
- 使用网络字体服务
方法 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：使用网络字体服务
使用 CSS 为同一字体添加多个字体文件的另一种方法是使用 Web 字体服务。这些服务（例如 Google Fonts 或 Adobe Fonts）使您可以轻松地在您的网站上导入和使用各种字体，而无需自己托管文件。
例子
在这里，我们将通过一个循序渐进的示例来实现这种方法 –
第 1 步
– 转到 Google Fonts 或 Adobe Fonts 等网络字体服务，然后选择所需的字体。
为了这个例子，我们将使用来自 Google Fonts 的
Sofia Sans
字体。
第 2 步
– 通过单击字体名称旁边的“+”图标，选择您想要添加到网页的字体。
第 3 步
– 打开右上角的“查看选定的系列”图标，通过将预连接和样式表链接添加到 index.html 文件，使用 font-family 属性将导入的字体应用于网页上的特定元素。
<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）轻松完成这项工作。