作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
网站的视觉身份大多是由两个设计原则所驱动的:颜色和字体。在过去十年中,在为设备上有更多预加载字体的用户提供自定义字体方面取得了巨大的进展,在@font-face规则下加载自定义字体的能力,以及使用字体托管服务。
在本教程中,您将尝试在您的网站上加载字体的示例。您将使用 font stack,基于可用性的字体排序,以使用可能安装在用户设备上的字体。然后,您将使用一个字体托管服务, Google Fonts,以查找,选择和加载自定义字体到您的页面。最后,您将使用@font-face规则加载自托的字体家族,然后是自托的变量字体。
前提条件
您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity来了解 CSS 的类型选择器、组合选择器和特定特性,您可以在 How To Select HTML Elements to Style with CSS中找到。
您可以在教程中找到的 CSS 中的字体堆和字体属性。 How To Style Text Elements with Font, Size, and Color in CSS中找到。
您可以在本地机器上存储的空的 HTML 文件是 index.html,您可以从您的文本编辑器和选择的 Web 浏览器访问。 要开始,请参阅我们的 How To Set Up Your Project HTML 教程,并
设置HTML并创建初始字体堆栈
字体堆的概念起源于网络的早期,当时只有少数可靠的字体可以安装在大多数计算机上。通常是可能的,字体将无法使用,所以字体堆提供了浏览器可以尝试查找和加载的字体的顺序。在本节中,您将学习弹性字体堆的原则以及现代设备上的字体的选项。但首先,您将创建示例HTML来展示这些字体。
首先,在文本编辑器中打开index.html,然后在文件中添加以下HTML:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>A Demo Font Family Page</title>
8 <link href="styles.css" rel="stylesheet" />
9 </head>
10 <body>
11 </body>
12</html>
在<head>标签中,第一个<meta>标签定义了 HTML 文件的字符设置。第二个<meta>标签定义了移动设备应该如何渲染页面。
接下来,在<body>标签中,添加页面的内容。这个内容被称为 filler content from Cupcake Ipsum,它提供文本以看起来像内容而实际上没有说任何东西。
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>A Demo Font Family Page</title>
8 <link href="styles.css" rel="stylesheet" />
9 </head>
10 <body>
11 <main>
12 <header>
13 <div class="content-width">
14 <h1>Sweet strawberry cheesecake</h1>
15 <p><em>Sweet muffin bear claw</em> donut chupa chups liquorice tiramisu candy canes sweet.</p>
16 </div>
17 </header>
18
19 <div class="content-width">
20 <p>Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. <strong>Croissant icing chupa chups</strong> sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon gummies macaroon biscuit chocolate carrot cake gummi bears.</p>
21
22 <h2>Donut candy canes cotton candy</h2>
23
24 <p><strong><em>Liquorice gingerbread tiramisu</em></strong> pie bonbon soufflé. Jujubes tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.</p>
25
26 <p><em>Jelly-o jelly-o jelly</em> lollipop croissant. Carrot cake tart danish macaroon dragée gingerbread. Sugar plum cotton candy biscuit <strong>fruitcake powder liquorice</strong>. Shortbread candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.</p>
27
28 <h3>Gingerbread gummi bears</h3>
29
30 <p><em>Tiramisu sweet pastry</em> danish topping ice cream caramels. Tiramisu candy liquorice jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps marshmallow danish pudding cotton candy. <strong>Cake jujubes biscuit</strong> topping marzipan sweet roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie jelly-o donut sesame snaps icing marzipan.</p>
31
32 <p><strong><em>Bonbon chupa chups</em></strong> donut dessert pudding. Sweet roll caramels dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan lemon drops jelly.</p>
33 </div>
34 </main>
35 </body>
36</html>
填写器内容包含一系列用于提供不同的字体风格的元素. 默认情况下,<strong>标签将使其内容大胆,<em>标签将使其内容更大,标题标签将增加字体大小和其内容大胆。
接下来,回到文本编辑器,在同一个文件夹中创建styles.css文件,即index.html。这是您在index.html元素<head>中引用的文件。
1[label styles.css]
2body {
3 margin: 0;
4 background-color: hsl(0, 0%, 100%);
5 color: hsl(0, 0%, 10%);
6 line-height: 1.5;
7}
8
9.content-width {
10 max-width: 70ch;
11 width: calc(100% - 4rem);
12 margin: 0 auto;
13}
14
15main {
16 margin-bottom: 4rem;
17}
18
19header {
20 margin-bottom: 4rem;
21 padding: 2rem 0;
22 background-color: hsl(280, 50%, 40%);
23 border-bottom: 4px solid hsl(300, 50%, 50%);
24 color: hsl(300, 50%, 90%);
25}
26
27header p {
28 color: hsl(300, 50%, 85%);
29}
30
31h1, h2, h3 {
32 margin: 0;
33 line-height: 1.25;
34}
35
36h2, h3 {
37 color: hsl(280, 50%, 40%)
38}
这些风格创建页面的整体视觉风格。标题具有紫色背景,内部的h1和p是紫色的。主和内容宽选择器创建页面布局,而体和标题选择器通过设置线高、颜色和边缘`值来提供多个类型风格。
将您的更改保存到 styles.css,然后打开您的 Web 浏览器. 在浏览器中打开 index.html,将文件拖入浏览器窗口,或使用浏览器的 ** Open File** 选项。
您的浏览器中的index.html文件的文本将使用浏览器的本地默认字体. 在大多数情况下,这将是像 Times New Roman这样的序列字体。 最有效的方式来定制字体是使用已经在最终用户的计算机上的字体。 使用本地字体可以缓解浏览器下载和处理大文件。
今天,通常有几十个本地字体可供选择;这些字体被称为 _system 字体。 Microsoft和 Apple都保持与他们的系统一起提供的字体的最新列表。
要开始使用预安装的系统字体,请在文本编辑器中返回styles.css。在body选择器中,添加一个font-family属性,并将其值变成一个称为字体堆的字体列表:
1[label styles.css]
2body {
3 margin: 0;
4 background-color: hsl(0, 0%, 100%);
5 color: hsl(0, 0%, 10%);
6 line-height: 1.5;
7 font-family: "PT Sans", Calibri, Tahoma, sans-serif;
8}
9...
浏览器将连续尝试在字体堆中加载本地字体,直到它成功为止。对于这个字体堆,第一个尝试的字体是PT Sans,这是引用,因为它是一个多单词字体名称。PT Sans是来自 ParaType的字体,在苹果操作系统上预安装,并且也可以免费从 Google Fonts获得。下一个字体是Calibri,然后是另一个字体和Tahoma。 Calibri是来自微软的字体,安装在最近版本的Windows上,和 Tahoma是微软的另一个字体,已经存在于苹果操作系统上超过十年。
如果前三种字体中没有任何一个可用,那么浏览器将使用浏览器的默认字体sans-serif,如 Helvetica或 Arial。
将您的更改保存到 styles.css,然后在浏览器中更新 `index.html。 您的操作系统和安装的字体将确定哪个字体被渲染,以及它是如何渲染的。
一个 _font 家族包括给定字体的所有重量和风格变异,可以包括许多额外的重量和风格,这些风格会改变一个字体的薄度,厚度和倾斜度。
字体风格属性决定了字体的斜度;该值最常见的是意大利式;然而,一些字体支持斜度值,该值接受一个可选的度值来表示斜度。
字体重属性有两个定义的命名值正常和粗糙,但最通用的和可预测的方式来确定这个值是使用一个重量数。重量数值通常被定义为从100到900的增量,其中100是一个薄重和900是一个厚重。
要在整个教程中为本页设置一些新的基础字体样式,请在文本编辑器中返回styles.css。然后为每个h1,h2,h3和p元素创建一个元素选择器。
1[label styles.css]
2...
3h2, h3 {
4 color: hsl(280, 50%, 40%)
5}
6
7h1 {
8 font-size: 3rem;
9 font-weight: 100;
10}
11
12h2 {
13 font-size: 2rem;
14 font-weight: 200;
15}
16
17h3 {
18 font-size: 1.75rem;
19 font-style: italic;
20 font-weight: 200;
21}
22
23p {
24 font-size: 1.125rem;
25}
这里的h1设置为3rem的字体大小,相当于48px,具有100的薄字体重。然后,h2设置为2rem,相当于32px,并设置为200的字体重。接下来,h3设置为与h2相同的字体重量和略微小的字体大小,但获得了添加的字体风格属性,设置为italic。最后,p元素选择器将标准的字体大小提升到1.125的rem,这在这种情况下相当于18px。本文的整体风格调整将与您在每个部分中使用的字体改变相同。
将更改保存到 styles.css,然后返回浏览器并更新 index.html. 总体文本大小出现了碰撞,标题风格越来越不同。
在本节中,您使用了字体堆,以排序顺序在页面上加载一系列可能的字体. 您还了解了可能的变异的字体家族的字体重量和字体风格属性。
从托管服务中查找和加载字体文件
托管字体服务是为网站寻找和提供自定义字体的一种流行的有效方法。 服务如 Google 字体, Adobe 字体(以前称为 Typekit)和 Typography.com提供了大量高质量的字体库,客户端在浏览您的页面时会暂时下载。
每个字体托管服务都有自己的字体加载过程,在许多情况下,有相关费用. 对于本节,您将从谷歌的服务中找到和加载字体,因为它免费托管开源和有限许可证的字体。
首先,打开 fonts.google.com。 使用页面顶部的搜索栏搜索名为Open Sans的字体。 搜索结果会列出匹配的术语,这是一种链接,将您带到 Google Fonts Open Sans 页面。 在此页面上,有几个字体风格的列表。 每个字体重量和风格组合都是浏览器下载的独特字体文件。
<$>[注]
**注:**每个字体重量和字体风格都需要根据需要进行选择,而不是选择所有字体。
对于此设计,请选择 Light 300, Light 300 italic, Regular 400, Regular 400 italic, Bold 700和 Bold 700 italic。
接下来,复制需要从 Google 字体服务中加载文件的 <link> 标签。 要做到这一点,选择 选项而不是 @import 选项,以便在 Google 字体界面上加载文件。 复制所提供的 <link> 标签系列。 然后,在文本编辑器中返回 index.html。 进入 <head> 元素,然后在 <link> 标签加载 styles.css 后,粘贴 Google 字体中的 <link> 标签。 以下代码块中的突出 HTML 显示了加载代码的位置:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 ...
6 <link href="styles.css" rel="stylesheet" />
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
10 </head>
11 <body>
12 ...
13 </body>
14</html>
第一两个<link>元素执行一个名为 preconnect 的任务,该任务告诉浏览器优先考虑外部 Web 连接,而这两个<link>元素则准备浏览器尽快从第三个<link>中加载 CSS 文件和字体文件。
现在该字体已经准备好让浏览器将其加载到页面上,接下来你需要应用字体风格,以便文本使用该字体进行渲染。
将您的更改保存到index.html,然后返回文本编辑器中的styles.css。在body选择器中,转到font-family属性。在PT Sans字体前的引用中,预先将字体名称Open Sans的值列入字体名称中,然后列出一个字符串。下列代码块中的突出CSS显示了新字体在字体堆中的位置:
1[label styles.css]
2body {
3 margin: 0;
4 background-color: hsl(0, 0%, 100%);
5 color: hsl(0, 0%, 10%);
6 line-height: 1.5;
7 font-family: "Open Sans", "PT Sans", Calibri, Tahoma, sans-serif;
8}
9...
通过将 Open Sans 添加到字体堆的开头,浏览器将返回下一个可用的本地字体,如果浏览器无法从 Google 上加载文件,重要的是始终有一个至少两个字体堆,堆中的最后一个字体是sans-serif,serif,monospace,或其他最有效地类似预期的字体的命名值。
将您的更改保存到styles.css并在网页浏览器中打开index.html。页面上的文本现在将使用从 Google 字体中加载的 Open Sans 字体进行渲染。设置为100和200的字体重量的文本将使用300,因为这是最接近的可用字体。下面的图像显示了浏览器中的这种情况:
在本节中,您从 Google 字体上加载了一组字体。您了解到每个字体重量和风格是从服务上加载的不同文件,并且加载的变异数量可能会影响网站性能。
单独托管字体加载@font-face
自我托管字体是存储在您的服务器上的字体文件,以及其他 Web 组件,如 HTML 和 CSS 文件。考虑自我托管字体文件的一个常见原因是,当您想使用不是由托管服务提供的字体时。在自我托管时,您对字体如何相互关联以及它们的名称有更多的控制,您可以通过@font-face规则的定义来设置。在本节中,您将写出自己的@font-face规则,并将一组字体加载到您的网页上。
对于本节,您需要下载 包含开源字体的示例 zip 文件。
1curl -sL https://assets.digitalocean.com/articles/68060/fonts.zip -o fonts.zip
一旦您下载了该文件,请提取 zip 文件中包含的字体目录,并将其放置在您的计算机上的index.html和styles.css文件的相同目录中。
1unzip fonts.zip
接下来,在文本编辑器中打开index.html。 因为您将从 zip 文件中加载本地字体,您可以删除 Google 字体代码。 在本节中,您将从现有styles.css文件中加载字体文件。 请确保您的<head>元素的内容设置为以下代码块:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>A Demo Font Family Page</title>
8 <link href="styles.css" rel="stylesheet" />
9 </head>
10 <body>
11 ...
12 </body>
13</html>
将您的编辑保存到index.html,然后在文本编辑器中打开styles.css。
您可以使用@font-face规则在网页上加载自定义字体。加载自定义字体的历史导致了一种复合方法,以支持最广泛的浏览器。不同于其他 atrules,如@media或@supports,@font-face规则没有额外的论点。在规则块内,只接受一组的属性。最重要的是font-family,它描述了浏览器将使用的名称来引用和加载相应的字体文件。然后,src属性引用了字体文件的位置。为了支持版本的 Internet Explorer在版本9之前,需要两种src属性,而第一个只引用了eot字体文件格式。第二个src属性
要开始使用@font-face规则,请在文本编辑器中打开styles.css。在文件的顶部,在body选项之前,创建以下@font-face规则:
1[label styles.css]
2@font-face {
3 font-family: "Fira Sans";
4 src: url('fonts/fira/eot/FiraSans-Regular.eot');
5 src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
6 url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
7 url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
8 url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
9}
10
11body {
12 ...
13}
14...
在这个规则中,你已经在引用中添加了一个字体家族属性,其值为Fira Sans。由于这个代码定义了整体的字体家族,所以只应该使用一个字体名称。对于src的字体格式的单行列表分为两部分。第一个是url()属性,就像背景图像一样,提供了服务器上的文件格式的路径。然后,format()解释了所引用的文件类型,允许浏览器选择支持的格式。
fira文件夹中的字体文件夹包含四个文件夹,包含Fira Sans字体的特定文件格式。 _EOT_是指嵌入式OpenType,微软为Internet Explorer开发的格式来加载自定义字体。 _TTF_是指TrueType字体,并且是一个较早的字体格式,最初没有用于Web开发。 _WOFF_和 _WOFF2_格式是指Web开放字体格式,而2是指格式的第二个版本。 大多数现代浏览器均支持TTF,WOFF和WOFF2。 为了创建一个涵盖最可能的浏览器格式的@font-face规则,您为您的字体提供了多个来源。
现在你已经为Fira Sans创建了@font-face规则,然后进入body选择器中的font-family属性。在font-family的值中,用Open Sans代替Fira Sans,以便在你的页面上使用自我托管的字体。
1[label styles.css]
2@font-face {
3 ...
4}
5
6body {
7 margin: 0;
8 background-color: hsl(0, 0%, 100%);
9 color: hsl(0, 0%, 10%);
10 line-height: 1.5;
11 font-family: "Fira Sans", "PT Sans", Calibri, Tahoma, sans-serif;
12}
13...
即使字体被从同一个位置加载到styles.css和index.html文件,但保持替代品的字体堆很重要. 有许多未知的原因,自托字体可能无法加载,如果浏览器出现问题,足够的备份有助于维持您网站的类似美观。
保存您的變更到「styles.css」並在網頁瀏覽器中開啟「index.html」。 請注意,字體的大膽和 italics 版本看起來不太正確。 這是因為在「@font-face」規則中,只有正規字體重量和風格檔案被加載並使用。 當瀏覽器需要將大膽的重量或 italic 風格應用到字體中,但缺少適當的字體檔案時,瀏覽器會創建所需的變化。 這個改變的字體形式被稱為 faux bold 和 faux italic。 Faux bold 是由添加一個字體的字體,這通常會創造出更大的字體間隔,這可能會干擾您的意圖布局。 Faux italic
下图显示了如何在浏览器中出现假大胆、意大利式和大胆的意大利式风格:
为了为浏览器提供一个字体家族的适当变异,在@font-face规则中需要提供更多细节,您需要创建更多的规则来加载额外的变异文件。
在@font-face规则中,在第二个src属性之后添加一个字体重量和一个字体风格属性:
1[label styles.css]
2@font-face {
3 font-family: "Fira Sans";
4 src: url('fonts/fira/eot/FiraSans-Regular.eot');
5 src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
6 url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
7 url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
8 url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
9 font-weight: normal;
10 font-style: normal;
11}
12...
在这里,您将两个属性的值设置为正常。对于字体重量,正常值等同于400的数字重量值。这些属性告诉浏览器将这些字体文件应用于正常变异。
接下来,为了提供纠正 faux bold 和 faux italic 所需的变异,添加更多@font-face 规则来参考每个font-weight 和font-style 组合:
1[label styles.css]
2/* Fira Sans Regular */
3@font-face {
4 font-family: "Fira Sans";
5 src: url('fonts/fira/eot/FiraSans-Regular.eot');
6 src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
7 url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
8 url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
9 url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
10 font-weight: normal;
11 font-style: normal;
12}
13
14@font-face {
15 font-family: "Fira Sans";
16 src: url('fonts/fira/eot/FiraSans-Italic.eot');
17 src: url('fonts/fira/eot/FiraSans-Italic.eot') format('embedded-opentype'),
18 url('fonts/fira/woff2/FiraSans-Italic.woff2') format('woff2'),
19 url('fonts/fira/woff/FiraSans-Italic.woff') format('woff'),
20 url('fonts/fira/woff2/FiraSans-Italic.ttf') format('truetype');
21 font-weight: normal;
22 font-style: italic;
23}
24
25/* Fira Sans Bold */
26@font-face {
27 font-family: "Fira Sans";
28 src: url('fonts/fira/eot/FiraSans-Bold.eot');
29 src: url('fonts/fira/eot/FiraSans-Bold.eot') format('embedded-opentype'),
30 url('fonts/fira/woff2/FiraSans-Bold.woff2') format('woff2'),
31 url('fonts/fira/woff/FiraSans-Bold.woff') format('woff'),
32 url('fonts/fira/woff2/FiraSans-Bold.ttf') format('truetype');
33 font-weight: bold;
34 font-style: normal;
35}
36
37@font-face {
38 font-family: "Fira Sans";
39 src: url('fonts/fira/eot/FiraSans-BoldItalic.eot');
40 src: url('fonts/fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
41 url('fonts/fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
42 url('fonts/fira/woff/FiraSans-BoldItalic.woff') format('woff'),
43 url('fonts/fira/woff2/FiraSans-BoldItalic.ttf') format('truetype');
44 font-weight: 700;
45 font-style: italic;
46}
47...
随着更多变异的添加,添加评论有助于更容易识别字体重组,因此您在第一个@font-face规则上方添加了CSS评论,然后在第一个规则下方,您为字体的意大利语、大胆和大胆的意大利语变异创建了另外三个@font-face规则。
将这些更新保存到您的 styles.css 文件中,然后在浏览器中刷新 `index.html。 您的浏览器现在正在加载所提供的字体家族的所有变体。 下面的图像显示了大胆,意大利语和大胆意大利语的假和真实版本之间的差异:
真正的大胆比浏览器的假大胆要厚得多,并且文本更接近,因而构成较厚的字体字符串。比较意大利语字母中的较低case a字符时,真正的 italic字符更为显着。
接下来,还有一些更多的字体变体可加载,因为标题元素使用Fira Sans的更薄的重量版本。
在文本编辑器中返回styles.css,并在正常版本的@font-face规则之上创建四个额外的@font-face规则:
1[label styles.css]
2/* Fira Sans Thin */
3@font-face {
4 font-family: "Fira Sans";
5 src: url('fonts/fira/eot/FiraSans-Thin.eot');
6 src: url('fonts/fira/eot/FiraSans-Thin.eot') format('embedded-opentype'),
7 url('fonts/fira/woff2/FiraSans-Thin.woff2') format('woff2'),
8 url('fonts/fira/woff/FiraSans-Thin.woff') format('woff'),
9 url('fonts/fira/woff2/FiraSans-Thin.ttf') format('truetype');
10 font-weight: 100;
11 font-style: normal;
12}
13
14@font-face {
15 font-family: "Fira Sans";
16 src: url('fonts/fira/eot/FiraSans-ThinItalic.eot');
17 src: url('fonts/fira/eot/FiraSans-ThinItalic.eot') format('embedded-opentype'),
18 url('fonts/fira/woff2/FiraSans-ThinItalic.woff2') format('woff2'),
19 url('fonts/fira/woff/FiraSans-ThinItalic.woff') format('woff'),
20 url('fonts/fira/woff2/FiraSans-ThinItalic.ttf') format('truetype');
21 font-weight: 100;
22 font-style: italic;
23}
24
25/* Fira Sans Light */
26@font-face {
27 font-family: "Fira Sans";
28 src: url('fonts/fira/eot/FiraSans-Light.eot');
29 src: url('fonts/fira/eot/FiraSans-Light.eot') format('embedded-opentype'),
30 url('fonts/fira/woff2/FiraSans-Light.woff2') format('woff2'),
31 url('fonts/fira/woff/FiraSans-Light.woff') format('woff'),
32 url('fonts/fira/woff2/FiraSans-Light.ttf') format('truetype');
33 font-weight: 200;
34 font-style: normal;
35}
36
37@font-face {
38 font-family: "Fira Sans";
39 src: url('fonts/fira/eot/FiraSans-LightItalic.eot');
40 src: url('fonts/fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
41 url('fonts/fira/woff2/FiraSans-LightItalic.woff2') format('woff2'),
42 url('fonts/fira/woff/FiraSans-LightItalic.woff') format('woff'),
43 url('fonts/fira/woff2/FiraSans-LightItalic.ttf') format('truetype');
44 font-weight: 200;
45 font-style: italic;
46}
47...
这些新规则加载了Fira Sans的薄和轻变体,分别为100和200``字体重值。
将这些更改保存到styles.css,然后返回浏览器并更新index.html。标题元素现在正在使用Fira Sans的更薄的变体,如下图所示:
在本节中,您加载了使用@font-face规则的自托字体文件,您了解了假大胆和语如何影响字体的视觉呈现,以及如何将许多字体文件与共同的font-family值联系起来。
使用变量字体的工作
可变字体是对网页打字选项的相对较新的补充。在以前的部分,每个字体重量和风格都必须从一个单独的文件中加载,可变字体在一个单个文件中包含信息,从中可以计算许多变异。可变字体可以提高性能,并提供比以前更多的设计可能性。
要开始使用变量字体,请在文本编辑器中打开styles.css。 首先,从上一节中删除所有@font-face规则,并用以下新规则取代它们:
1[label styles.css]
2@font-face {
3 font-family: Raleway;
4 src: url('fonts/raleway/Raleway.woff2') format('woff2');
5 font-style: normal;
6 font-weight: 300 800;
7}
8
9body {
10...
变形字体结构上看起来与标准的@font-face规则相同。你首先声明一个font-family名称,然后提供一个src值列表,尽管通常在变形字体中只需要一个格式。这个字体的font-style属性被设置为normal。一个差异来自font-face值。而不是定义一个单一的值,一个范围是用最薄的重量写的,然后是最厚的重量。通过定义这个范围,浏览器可以为可能发生的变异计算做好准备。在这里,你为Raleway设置了font-face规则,从300到400的font-weight范围。
接下来,您需要在字体堆中设置Raleway。从字体堆开始删除Fira Sans并用Raleway取代。由于名称Raleway不包含任何间隙,因此不需要在引用中:
1[label styles.css]
2...
3body {
4 margin: 0;
5 background-color: hsl(0, 0%, 100%);
6 color: hsl(0, 0%, 10%);
7 line-height: 1.5;
8 font-family: Raleway, "PT Sans", Calibri, Tahoma, sans-serif;
9}
10...
将您的更改保存到styles.css并在您的 Web 浏览器中打开index.html。浏览器会产生真实的字体重量而不是假的重量,但由于缺乏定义的 italic 风格,它不会正确地处理 italics。
要设置 Raleway 变量字体的 italic 版本,请在文本编辑器中返回 styles.css. 在第一个 @font-face` 规则下,创建一个新的规则集:
1[label styles.css]
2@font-face {
3 font-family: Raleway;
4 src: url('fonts/raleway/Raleway.woff2') format('woff2');
5 font-weight: 300 800;
6 font-style: normal;
7}
8
9@font-face {
10 font-family: Raleway;
11 src: url('fonts/raleway/Raleway-Italic.woff2') format('woff2');
12 font-weight: 300 800;
13 font-style: italic;
14}
15
16body {
17 ...
18}
19...
「src」已將字體檔案名稱從「Raleway.woff2」改為「Raleway-Italic.woff2」,而「font-style」值現在為「italic」。
将您的更改保存到 styles.css,并在您的浏览器中更新页面。浏览器现在正在渲染 Raleway 的各种重量意大利语版本。下面的图像显示了页面的更新版本,具有完整的 Raleway 变量字体集:
使用可变字体的优点是,可以在字体重量范围内定义的任何整数值可用。 虽然标准字体重量增加100值,可变字体重量增加1值。
若要使用该范围中的重量值,请在文本编辑器中返回styles.css,并执行以下更改:
1[label styles.css]
2...
3h1 {
4 font-size: 3rem;
5 font-weight: 350;
6}
7
8h2 {
9 font-size: 2rem;
10 font-weight: 570;
11}
12
13h3 {
14 font-size: 1.75rem;
15 font-style: italic;
16 font-weight: 450;
17}
18
19p {
20 font-size: 1.125rem;
21}
22
23strong {
24 font-weight: 600;
25}
对于h1选择器,您将字体重值更改为350。然后,您将h2``字体重属性设置为570,h3设置为450。
请确保将您的更改保存到 styles.css,然后返回您的浏览器并更新 index.html. 浏览器现在在整个页面上渲染 Raleway 字体的不同重量。
在这个最后的部分中,您在您的网页上加载并使用了可变字体. 可以从一个或两个可变字体中获得更多的变异,而不是十几种标准字体。
结论
字体是设计的视觉美学的关键组成部分,它们是非常需要的资产,帮助一个网站脱颖而出于另一个。
在本教程中,您了解了在网站上可以使用字体的主要方式。您使用了本地字体和字体堆来告诉浏览器尝试加载的字体。然后,您使用了字体托管服务,有效地从Google Fonts上加载了Open Sans字体。接下来,您设置了自己的@font-face规则系列,并创建了自己的自托字体家族。最后,您建立了您学会了加载自己的字体以使用可变字体并尝试提供的通用性和性能。 请记住,无论字体是本地的,还是自托服务,因为字体可能不会因未知原因加载,在字体堆中始终具有反弹字体是很重要的。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。