ATOZ CSS屏幕截图：Unicode范围和 @font-face

要点总结

• CSS 的 @font-face 规则允许在网页设计中使用自定义字体，从而提升性能并改善排版效果。务必在不同的操作系统和浏览器上测试这些自定义字体，以确保其正确显示。
• CSS 的 unicode-range 属性可用于限制自定义字体应用的字符范围。这对于直接在标记中添加特殊字符或符号，或对特定字符使用特殊字体特别有用。
• 通过使用 unicode-range 属性，您可以通过确保仅下载和使用必要的字符来提高网页性能，从而减少需要加载的数据量。但是，需要注意的是，并非所有浏览器都支持此属性，因此应在 CSS 代码中提供备用字体。

视频讲解（文字稿节选）

上一节我们学习了各种文本样式属性。

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

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

本节我们将学习：

• @font-face 规则详解
• 如何使用字体堆栈和 unicode-range 控制排版

@font-face

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

• Arial
• Comic Sans
• Courier New
• Georgia
• Impact
• Palatino
• Tahoma
• Times New Roman
• Trebuchet
• Verdana

其中一些字体非常优秀，非常适合网页使用——Georgia 作为衬线字体，Arial 或 Verdana 都是很棒的字体。Comic Sans 当然不是最好的……

但现在，我们可以使用各种自定义字体，并通过使用 @font-face 使其在所有浏览器上显示。

虽然我们可以这样做，但始终值得在一系列操作系统和浏览器上测试任何自定义字体，以确保它们看起来符合预期。

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

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

<code class="language-css">@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');
}</code>

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

为了避免用户下载系统中已有的字体，可以指定要搜索的字体的本地名称 local()。

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

他们有一个网络字体生成器，它运行得非常好。他们提供的下载还包含在 CSS 中添加这些自定义字体的所有代码片段，这也很方便！

unicode-range

字体的每个字符都可以用其 Unicode 数字来描述，其形式为：

<code class="language-css">@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');
}</code>

字符串“AtoZ CSS”可以用 Unicode 表示如下：

<code>U+0041</code>

包括空格在内的每个字符都有唯一的 Unicode 数字。UTF-8 字符集中还包含一系列特殊的字符，这对于直接在标记中添加形状和符号非常有用。

在使用 @font-face 添加自定义字体时，我们可以限制它们应用的字符范围，这乍一看有点奇怪，但请耐心听我解释。

Baskerville 字体的斜体＆符号非常漂亮，许多设计师即使不使用 Baskerville 字体的其余部分，也喜欢使用它。

只对＆符号使用这种特殊字体的一种方法是将其包装在 <span></span> 标签中，并为其设置不同的 font-family。但这有点麻烦，并且完全可以在没有任何额外标记的情况下完成。

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

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

首先，我们创建 @font-face 规则来加载单个字符字体。我将为其命名为“Ampersand”，并使用本地字体文件源以节省带宽。

我将 unicode-range 指定为 U 0026，用于单个＆符号字符。可以指定整个字符范围，正如属性名称所示，但在这种情况下只需要一个字符。

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

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

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

对于标题，我将添加 Museo 或 Rockwell 或衬线字体作为备用字体。

对于正文，我将添加 Avenir、Arial 或 sans-serif 作为备用字体。

<code class="language-css">@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}</code>

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

unicode-range 的浏览器支持良好。它在所有现代浏览器（Firefox 除外）以及 IE9 及更高版本中受支持。由于这纯粹是视觉增强，因此浏览器支持对我来说不是什么大问题——不支持的浏览器只会获得可以成功加载的堆栈中的第一个字体。

(后续的FAQ部分已省略，因为与伪原创目标不符，且篇幅过长。核心内容已在以上部分体现。)

以上是ATOZ CSS屏幕截图：Unicode范围和 @font-face的详细内容。更多信息请关注PHP中文网其他相关文章！