CSS - 网页字体_CSS 菜鸟教程

在网站中使用但默认情况下未安装在用户设备上的字体称为 Web 字体。CSS 允许指定在 Web 上可用的字体文件，以便在访问时与您的网站一起轻松下载。

CSS Web Fonts - 字体格式类型

下面解释了不同类型的字体格式：

TrueType 字体（TTF）：TrueType 字体是 Apple 开发的一种轮廓字体。它是 MacOS 和 Windows 操作系统最常见的字体格式。
OpenType 字体（OTF）：OpenType 字体源自 TrueType 字体格式的基本结构，但向其添加了一些额外的复杂数据结构。它提供了更多的排版控制。
Web 开放字体格式（WOFF）：顾名思义，它是 Mozilla 开发的一种开放 Web 字体。它使用 TrueType、OpenType 和 Open Font Format 使用的结构压缩版本，以及元数据和专用数据结构的附加信息。
Web Open Font Format2 （WOFF2）：它是 Web Open Font Format 的第二个版本。表示为 woff2。这种字体具有比 woff 更好的压缩算法。
SVG 字体/形状：SVG 字体是 OpenType 字体格式的新版本。这种格式允许字符以多种颜色显示，具有不同的透明度，甚至动画。
嵌入式开放类型字体（EOT）：这些是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入字体。只有 Microsoft Internet Explorer 支持它们。

CSS Web 字体 - 关键点

以下部分指定了与 Web 字体相关的一些要点：

网络上的字体通常不是免费的，无法使用。您要么需要付费，要么需要遵循许可条件，例如在您的代码中或在您的网站上向字体的创建者提供信用。窃取这些字体或在没有给予适当信用的情况下使用它们，在道德上是不正确的。
Web 开放字体格式版本 1 和 2（WOFF 和 WOFF2）受到主要浏览器的支持，甚至是较旧的浏览器。
WOFF2 文件格式完全支持 TrueType 和 OpenType 规范，包括可变字体、彩色字体和字体集。
重要的是字体文件的列出顺序。浏览器从提供的多个字体文件列表中选择它能够使用的第一个字体文件。因此，您应该首先列出首选格式。当浏览器无法理解某种格式时，它会回退到下一个格式。
使用旧版浏览器时，您应提供 EOT（嵌入式开放类型）、TTF（真类型字体）和 SVG Web 字体以供下载。

CSS 网页字体 - @font面规则

使用@font面 CSS 规则，可以为未安装在用户设备上的网站指定字体。@font面规则有许多描述符来识别和描述字体。请参阅以下代码块，了解 @font-face at 规则语法：


@font-face {
	 	font-family: "Sansation Light Font";
	 	src: url("font/SansationLight.woff") format("woff");
	 	font-weight: normal;
	 	font-style: normal;
}

上述语法列出了以下属性：

font-family：指定引用字体时所用的名称。该名称可以是您想要的任何名称，但您应该在 css 代码中一致地使用此名称。
src：指定要通过 CSS 导入的字体文件的路径。url（）和字体文件的格式，通过。格式，这是可选的。指定格式很有用，因为它允许浏览器确定需要使用的字体。可以使用逗号分隔的值进行多个声明。
font-weight：指定字体的粗细（或粗体）。接受两个值来指定 font-face 支持的范围，例如 font-weight： 100 400;
font-style：指定字体的样式是否应使用其字体系列中的普通、斜体或倾斜字体进行设置。

注意：还可以为 Web 字体指定 font-variant 和 font-stretch 等值，在较新的浏览器中指定 unicode-range。当仅当页面包含这些指定字符时才下载字体时，此范围很有用，从而节省了不必要的下载。

让我们看一个应用@font面规则的例子：


<html>
<head>	
<style>
	 	@font-face {
	 	 	 font-family: "Sansation Light Font";
	 	 	 src: url("font/SansationLight.woff");
	 	}
	 	body {
	 	 	 font-family: "Sansation Light Font", serif;
	 	}
</style>
</head>
<body>
	 	<h2>@font-face at-rule</h2>
	 	<p>This is SansationLight Font.</p>
</body>
</html>

CSS 网页字体 - @font-face / font-stretch

以下示例演示了字体拉伸值的设置，使用@font面规则内使用的百分比范围 50% 和 200%：


<html>
<head>	
<style>
	 	@font-face {
	 	 	 src: local("monospace");
	 	 	 font-family: "f1";
	 	 	 font-style: normal;
	 	 	 font-stretch: 50% 200%;
	 	}

	 	.container {
	 	 	 font: 2rem "f1", sans-serif;
	 	}

	 	.font-condensed {
	 	 	 font-stretch: 50%;
	 	}

	 	.font-normal {
	 	 	 font-stretch: 100%;
	 	}

	 	.font-ultra-expanded {
	 	 	 font-stretch: 200%;
	 	}

	 	.font-semi-condensed {
	 	 	 font-stretch: semi-condensed;
	 	}

	 	.font-extra-condensed {
	 	 	 font-stretch: extra-condensed;
	 	}

	 	.font-ultra-condensed {
	 	 	 font-stretch: ultra-condensed;
	 	}

	 	.font-semi-expanded {
	 	 	 font-stretch: semi-expanded;
	 	}

	 	.font-extra-expanded {
	 	 	 font-stretch: extra-expanded;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <p class="font-condensed">ultra-condensed (50%)</p>
	 	 	 <p class="font-normal">normal (100%)</p>
	 	 	 <p class="font-expanded">ultra-expanded (200%)</p>
	 	 	 <p class="font-semi-condensed">semi-condensed</p>
	 	 	 <p class="font-ultra-condensed">ultra-condensed</p>
	 	 	 <p class="font-semi-expanded">semi-expanded</p>
	 	 	 <p class="font-extra-expanded">extra-expanded</p>
	 	 	 </div>
</body>
</html>

上面的示例显示了 @font-face at-rule 的声明及其描述符，例如 font-family、src、font-style 和 font-stretch。

CSS Web Fonts - 在线字体服务

大多数在线字体服务都是基于订阅的，通常存储和提供您可以使用的字体。Google Fonts 是一项免费服务，易于使用。请参阅以下步骤以使用 Google 字体：

转到 Google 字体。
搜索所需的字体或使用提供的过滤器查找您选择的字体，然后选择几种字体。
您可以通过单击字体名称旁边的（+）加号按钮来选择字体系列。
选择字体系列后，按“查看所选系列”按钮。
复制结果屏幕上显示的 HTML 代码行，并将其粘贴到 html 代码的 <head> 标记下。将其放在 <link> 元素上方，以便在 CSS 中使用之前导入所需的字体。
要将自定义字体应用于 HTML，请复制 CSS 中列出的 CSS 声明。

CSS Web 字体 - 导入字体

以下示例演示了在 html 代码中导入 google 字体并使用它。


<html>
<head>
	 	<link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
<style>
	 	html {
	 	 	 font-size: 12px;
	 	 	 margin: 0;
	 	 	 font-family: sans-serif;
	 	}

	 	body {
	 	 	 width: 80%;
	 	 	 max-width: 600px;
	 	 	 margin: 0 auto;
	 	}

	 	h1 {
	 	 	 font-size: 4.2rem;
	 	}

	 	h2 {
	 	 	 font-size: 3.5rem;
	 	}

	 	h1, h2 {
	 	 	 font-family: 'Lobster', cursive;
	 	}

	 	p {
	 	 	 font-size: 1.4rem;
	 	 	 line-height: 1.6;
	 	 	 font-family: 'monospace', sans-serif;
	 	}
</style>
</head>
<body>
	 	<h1>Web Font</h1>
	 	<h2>Google Font</h2>
	 	<p>Using the Google Font (Lobster) by importing it.</p>
</body>
</html>

<< CSS - 浏览器支持参考 CSS - PX 到 EM 的转换 >>