先决条件:	基本计算机知识，HTML基础(学习 HTML简介)，CSS基础知识(学习 CSS简介) )， CSS文本和字体基础。
目的:	要了解如何将网页字体应用于网页，使用第三方服务或通过编写自己的代码。

字体家庭重述

当我们在基本文字和字体样式中查看时，可以使用 mozilla.org/zh-CN/docs/Web/CSS/font-family"> font-family 属性。 这需要一个或多个字体系列名称，浏览器沿着列表向下移动，直到找到它在运行的系统上可用的字体:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

这个系统工作得很好，但传统上web开发人员的字体选择有限。 只有少数几种字体可以保证在所有常见系统中可用 - 所谓的 Web安全字体 a>。 您可以使用字体堆栈指定首选字体，其次是网络安全选项，然后是默认系统字体，但这增加了测试方面的开销，以确保您的设计看起来与每个字体等确定。

Web字体

但是有一个替代方案，其工作得很好，回到IE版本6.网络字体是一个CSS功能，允许您指定字体文件，随着您的网站下载，因为它被访问，意味着任何浏览器支持网络 字体可以具有您指定的字体。 惊人！ 所需的语法如下所示:

首先，您有 @ font-face / a>在CSS的开头，指定要下载的字体文件:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

在下面，您可以使用@ font-face中指定的字体系列名称将您的自定义字体应用到任何你喜欢的，正常:

html {
  font-family: "Bitstream Vera Serif Bold", serif;
}

语法确实比这更复杂一点; 我们将在下面详细介绍。

有两个重要的事情要记住网络字体:

1. Browsers support different font formats, so you'll need multiple font formats for decent cross browser support. For example, most modern browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2), the most efficient format around, but older versions of IE only support EOT (Embedded Open Type) fonts, and you might need to include an SVG version of the font to support older versions of iPhone and Android browsers. We'll show you below how to generate the required code.
2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.

主动学习:一个web字体示例

考虑到这一点，让我们从第一个原则构建一个基本的Web字体示例。 很难使用嵌入式活动示例来演示这一点，因此，我们希望您按照以下部分中详述的步骤来了解流程。

您应该使用 > web-font-start.html 和 start.css"class ="external"> web-font-start.css 文件作为开始添加您的代码(参见 -area / css / styling-text / web-fonts / web-font-start.html"class ="external">示例正在运行。)在计算机的新目录中创建这些文件的副本 现在。 在 web-font-start.css 文件中，您将找到一些最小的CSS来处理示例的基本布局和排版。

查找字体

在本例中，我们将使用两种网络字体，一种用于标题，一种用于正文文本。 首先，我们需要找到包含字体的字体文件。 字体由字体铸造厂创建，并以不同的文件格式存储。 通常有三种类型的网站，您可以在其中获取字体:

• A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include Font Squirrel, dafont, and Everything Fonts.
• A paid font distributor: This is a site that makes fonts available for a charge, such as fonts.com or myfonts.com. You can also buy fonts directly from fount foundaries, for example Linotype, Monotype, or Exljbris.
• An online font service: This is a site that stores and serves the fonts for you, making the whole process easier. See the Using an online font service section for more details.

让我们找到一些字体！ 转到字体松鼠并选择两种字体 - 标题的一个很有趣的字体(也许一个不错的显示或板衬线 字体)，以及稍微少些闪光和更易读的字体。 当您找到每个字体时，按下载按钮，并将文件保存在与先前保存的HTML和CSS文件相同的目录中。 它们是TTF(True Type Fonts)还是OTF(Open Type Fonts)都没有关系。

在每种情况下，解压缩字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中找到多个字体文件 - 一些字体分布为不同变体族 ，例如thin，medium，bold，italic，thin italic等。对于这个例子，我们只是想让你关心每个选择的单个字体文件。

生成所需的代码

现在你需要生成所需的代码(和字体格式)。 对于每种字体，请按照下列步骤操作:

1. Make sure you have satisfied any licensing requirement, if you are going to use this in a commercial and/or Web project.
2. Go to the Fontsquirrel Webfont Generator.
3. Upload your two font files using the Upload Fonts button.
4. Check the checkbox labelled "Yes, the fonts I'm uploading are legally eligible for web embedding."
5. Click Download your kit.

生成器完成处理后，您应该得到一个ZIP文件下载 - 将其保存在与HTML和CSS相同的目录中。

在您的演示中实现代码

此时，请解压缩您刚刚生成的Web字体套件。 在解压缩的目录中，您将看到三个有用的项目:

• Multiple versions of each font: .eot, .svg, .ttf, .woff, .woff2. As mentioned above, multiple fonts are needed for cross browser support — this is Fontsquirrel's way of making sure you've got everything you need.
• A demo HTML file for each font — load these in your browser to see what the font will look like in different usage contexts.
• A stylesheet.css file, which contains the generated @font-face code you'll need.

要在演示中实现这些字体，请按照下列步骤操作:

1. Rename the unzipped directory to something easy and simple, like fonts.
2. Open up the stylesheet.css file, and copy both the @font-face blocks contained inside into your web-font-start.css file — you need to put them at the very top, before any of your CSS, as the fonts need to be imported before you can use them on your site.
3. Each of the url() functions points to a font file that we want to import into our CSS — we need to make sure the paths to the files are correct, so add fonts/ to the start of each path (adjust as necessary.)
4. Now you can use these fonts in your font stacks, just like any web safe or default system font. For example:

   font-family: 'zantrokeregular', serif;

你应该最终得到一个演示页面，在其上实现一些漂亮的字体。 由于不同的字体以不同的大小创建，因此您可能需要调整大小，间距等，以便整理外观和感觉。

margin:0px auto;">

使用在线字体服务

在线字体服务通常为您存储和提供字体，因此您不必担心编写 @ font-face 代码，通常只需在您的网站中插入一行或两个代码 使一切工作。 示例包括 Typekit 和 "external"> Cloud.typography 。 这些服务中的大多数都是基于订阅的，除了 Google字体(一种有用的免费服务)，尤其是 用于快速测试工作和写作演示。

大多数这些服务都很容易使用，所以我们不会详细介绍。 让我们快速浏览一下Google字体，这样你就可以得到想法。 同样，使用 web-font-start.html 和 web-font-start.css 的副本作为起点。

1. Go to Google Fonts.
2. Use the filters on the left hand side to display the kinds of fonts you want to choose, and choose a couple of fonts you like.
3. To select a font, press the Add to Collection button alongside it.
4. When you've chosen the fonts, press the Use button in the bottom section of the page.
5. In the resulting screen, you first need to copy the line of code shown in section 3, and paste it into the head of your HTML file. Put it above the existing <link> element, so that the font is imported before you try to use it in your CSS.
6. You then need to copy the declarations listed in section 4 into your CSS as appropriate, to apply the custom fonts to your HTML.

@ font-face更详细

让我们来探索fontsquirrel为你生成的 @ font-face 语法。 这是其中一个块看起来像:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

这被称为"bulletproof @ font-face syntax"，在保罗爱尔兰从早期 @ font-face 开始流行( .paulirish.com / 2009 / bulletproof-font-face-implementation-syntax /"class ="external"> Bulletproof @ font-face语法)。 让我们来看看它做了什么:

• font-family: This line specifies the name you want to refer to the font to. You can put this as anything you like, as long as you use it consistently throughout your CSS.
• src: These lines specify the paths to the font files to be imported into your CSS (the url part), and the format of each font file (the format part). The latter part in each case is optional, but it is useful to declare it because it allows browsers to find a font they can use faster. Multiple declarations can be listed, separated by commas — the browser will search through them and use the first one it can find that it understands — it is therefore best to put newer, better formats like WOFF2 earlier on, and older, not so good formats like TTF later on. The one exception to this is the EOT fonts — they are placed as they are to fix a couple of bugs in older versions of IE whereby IE will try to use the first thing it finds, even if it can't actually use the font.
• font-weight/font-style: These lines specify what weight the font has, and whether it is italic or not. If you are importing multiple weights of the same font, you can specify what their weight/style is and then use different values of font-weight/font-style to choose between them, rather than having to call all the different members of the font family different names. @font-face tip: define font-weight and font-style to keep your CSS simple by Roger Johansson shows what to do in more detail.

概要

现在你已经完成了我们关于文本造型基础的文章，现在是时候测试你的理解与我们的模块，排版社区学校的主页的评估。