极客笔记如何使用CSS为同一字体添加多个字体文件
在设计网站时，排版在创建一个美观易读的布局中起着关键作用。然而，不同的浏览器和操作系统可能不支持相同的字体文件。为了确保您的网站在所有设备上正确显示，重要的是为同一字体包含多个字体文件。在本文中，我们将介绍使用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。
第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的Web字体服务，并选择所需的字体。
为了此示例，请使用来自Google Fonts的 Sofia Sans 字体。
步骤2 −通过点击字体名称旁边的“+”图标来选择您要添加到网页的字体。
步骤3 - 打开右上角的“查看所选家族”图标，并通过在index.html文件中添加pre-connect和stylesheet链接，使用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这样的网络字体服务，以轻松完成工作。