AtoZ CSS屏幕录像：Unicode范围和@ font-face

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

In the previous episode we looked at all sorts of properties for styling text.

在上一集中，我们介绍了各种样式的文本样式。

In modern browsers, and in IE back to version 4, we can add custom fonts to enhance the design of our websites.

在现代浏览器中，以及在IE 4及更高版本中，我们可以添加自定义字体来增强网站的设计。

We can leverage various features of these custom fonts to help boost performance and improve our typography overall.

我们可以利用这些自定义字体的各种功能来帮助提高性能并改善整体排版。

In this episode we’ll learn:

在本集中，我们将学习：

• All about the @font-face at-rule

  有关@font-face at-rule的所有信息

• And how to control typography with font stacks and unicode-range

  以及如何使用字体堆栈和unicode-range控制排版

@font-face (@font-face)

The choice of typeface on the web used to be limited to a small handful of “web-safe” fonts like:

网络上字体的选择过去仅限于少数“网络安全”字体，例如：

• Arial
  Arial
• Comic Sans
  Comic Sans
• Courier New
  快递新
• Georgia
  佐治亚州
• Impact
  影响力
• Palatino
  帕拉蒂诺
• Tahoma
  塔豪玛
• Times New Roman
  英语字体格式一种
• Trebuchet
  投石机
• Verdana
  Verdana

Some of these are excellent typefaces and are really well suited to the web – Georgia as a serif font and Arial or Verdana are all great fonts. Comic Sans is certainly not one of the best…

其中一些是出色的字体，并且确实非常适合网络使用–格鲁吉亚的衬线字体和Arial或Verdana都是很好的字体。 Comic Sans当然不是最好的之一。

But now we can now use all manner of custom fonts and have them display on all browsers by using @font-face.

但是现在我们可以使用各种方式的自定义字体，并使用@font-face将它们显示在所有浏览器中。

While we can do this, it’s always worth testing any custom fonts on a range of operating systems and browsers to make sure they look as good as expected.

尽管我们可以做到这一点，但始终值得在一系列操作系统和浏览器上测试任何自定义字体，以确保它们看起来像预期的一样好。

Do also bear in mind that font files can be quite large in file size so use them wisely to avoid performance issues.

还请记住，字体文件的文件大小可能会很大，因此请明智地使用它们以避免性能问题。

The syntax for @font-face looks like this:

@font-face的语法如下所示：

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

The font is given a name with the font-family property and then a series of different file types and formats are provided for each of the different browsers.

使用font-family属性为font-family命名，然后为每个不同的浏览器提供一系列不同的文件类型和格式。

To save users downloading fonts that they already have on their system, it’s possible to specify a local() name of the font to search for.

为了节省用户下载他们已经在系统上拥有的字体的可能性，可以指定要搜索的字体的local()名称。

In order to create all the correct formats of a font for different browsers, I use a fantastic online resource called Font Squirrel.

为了为不同的浏览器创建所有正确的字体格式，我使用了一种名为Font Squirrel的出色在线资源。

They have a web font generator and it works like a charm. The download they provide also contains all the code snippets for adding these custom fonts in your CSS which is pretty handy too!

他们有一个网络字体生成器，它的工作原理就像一个魅力。 他们提供的下载还包含用于在CSS中添加这些自定义字体的所有代码段，这也非常方便！

unicode-range (unicode-range)

Each of the characters in a font can be described by their unicode number which takes the form:

字体中的每个字符都可以通过其unicode号来描述，其形式为：

U+0041

The string “AtoZ CSS” could be expressed in unicode as follows:

字符串“ AtoZ CSS”可以用unicode表示，如下所示：

A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053

Every character including the space has a unique unicode number. There’s a whole range of special characters baked into the UTF-8 character set too which can be useful for adding shapes and symbols directly into your markup.

每个字符(包括空格)都有一个唯一的unicode号。 UTF-8字符集中也包含了一系列特殊字符，这对于将形状和符号直接添加到标记中很有用。

When adding custom fonts with @font-face we can limit the range of characters that they apply to which at first sounds a bit strange, but bear with me.

当使用@font-face添加自定义字体时，我们可以限制它们所应用的字符范围，起初听起来有些奇怪，但请耐心等待。

The italic ampersand of the typeface Baskerville is a thing of beauty and a lot of designers often like to use it even when not using the rest of the Baskerville font.

巴斯克维尔(Baskerville)字体的斜体＆符很漂亮，即使不使用其余的巴斯克维尔(Baskerville)字体，许多设计师也经常喜欢使用它。

One way of using this special font just for ampersands would be to wrap them in a span tag and set a different font-family on it. But this is a bit cumbersome and can be done without any extra markup at all.

仅将这种特殊字体用于＆符号的一种方法是将它们包装在span标签中，并在其上设置不同的font-family 。 但这有点麻烦，而且完全不需要任何额外的标记即可完成。

We can create a font containing just this character and add it to our font-stack as the first font in the list.

我们可以创建仅包含此字符的字体，并将其作为列表中的第一个字体添加到我们的字体堆栈中。

When the browser encounters characters that don’t appear in a font, it will scan down the stack until it does find a font that contains the required characters. We can use this behavior to add in the special ampersand when using any custom or web safe font.

当浏览器遇到没有出现在字体中的字符时，它将向下扫描堆栈，直到找到包含所需字符的字体为止。 当使用任何自定义或网络安全字体时，我们可以使用此行为添加特殊的“＆”号。

First we create the @font-face at-rule to load the single character font. I’ll give it the font-family name “Ampersand” and use a local source for the font files to save on bandwidth.

首先，我们创建@font-face规则以加载单个字符字体。 我给它一个font-family名称“ Ampersand”，并使用字体文件的本地来源以节省带宽。

I’ll specify the unicode-range as U+0026 for the single ampersand character. It’s possible to specify a whole range of characters, as the property name suggests, but just a single character is needed in this case.

我将单个＆字符的unicode-range指定为U+0026 。 正如属性名称所建议的那样，可以指定整个字符范围，但是在这种情况下只需要一个字符即可。

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

In this sample HTML file, I’ve got a series of headings and paragraphs that both contain a couple of ampersands.

在此示例HTML文件中，我有一系列标题和段落，其中都包含两个＆符。

I’ll create two different font stacks, one for the headings and one for the body copy. In each case, the first font in the stack will be the custom “Ampersand” font.

我将创建两种不同的字体堆栈，一种用于标题，另一种用于正文。 在每种情况下，堆栈中的第一个字体都是自定义的“ Ampersand”字体。

For the headings, I’ll add Museo or Rockwell or serif as a fallback.

对于标题，我将添加Museo或Rockwell或serif作为后备。

For the body, I’ll add Avenir, Arial or sans-serif as the fallback.

对于身体，我将添加Avenir，Arial或sans-serif作为后备。

h1, h2 {
  font-family: 'Ampersand', 'Museo Slab', 'Rockwell', serif;
}
p {
  font-family: 'Ampersand', 'Avenir', 'Arial', sans-serif;
}

And that’s it. When the browser renders the text, the first font in the stack only contains an ampersand character so it will use the next one down the list (if found) to render the remaining characters.

就是这样。 当浏览器呈现文本时，堆栈中的第一个字体仅包含一个＆字符，因此它将使用列表中的下一个(如果找到)来呈现其余字符。

The browser support for unicode-range is good. It’s supported in all modern browsers except Firefox and in IE back to version 9. As this is a purely visual enhancement, the browser support isn’t a huge worry for me – unsupported browsers will just get the first font in the stack that can be load successfully.

浏览器对unicode-range支持很好。 除Firefox和IE 9以外的所有现代浏览器均支持该功能。由于这是纯粹的视觉增强，因此浏览器支持对我来说并不是什么大麻烦-不支持的浏览器只会获得栈中第一个可以使用的字体。加载成功。

翻译自: https://www.sitepoint.com/atoz-css-screencast-unicode/