CSS Custom Font

如今，网络世界充斥着众多网页设计和开发公司争夺用户注意力。因此，构建一个视觉上吸引人且引人入胜的网站在维持人们的兴趣方面起着重要作用。除了自定义字体，还有其他简单但同样有效的策略可以用来实现上述目标。自定义字体使设计师能够为网站注入自己独特的身份，从而实现统一的品牌形象和良好的设计体验。为了开始介绍，我们将分析自定义字体的用途、优点以及一种利用这些字体来提升任何网站设计的方法。

设计版式字体的的重要性

在网站使用过程中，字体是传达视觉信息的一个非常重要的元素。它们不仅传达信息，还传达关于品牌形象和个性的许多信息。通过使用常见、易于获取的字体，存在着与众不同并为品牌或网站带来多样性的风险。然而，定制字体赋予了设计师选择自己字体类型的能力，这些字体与品牌形象相匹配，从而鼓励了个性化和难忘的用户体验。

为您的网站添加自定义字体：优点

品牌形象：通过使用自己的字体，品牌可以与竞争对手区分开来，并传达与塑造品牌个性相关的潜意识情感和信息。字体的选择对于设计至关重要，因为它可以传达所需的外观，无论是优雅、俏皮、现代还是传统，并有助于将愿景变为现实以实现它。

差异化： 在一个充斥着噪音的在线世界中，区分自己至关重要。拥有自定义字体的网站就像一颗芯片，使其与竞争对手区分开来，令人难忘且独特。

视觉一致性： 通过在整个网站上使用个性化字体，设计师能够维护每个页面和元素的统一性和连贯性。这种视觉和谐是观众的绝佳补充，因为它提供了一个更愉快的环境。

提高可读性： 选择合适的特殊字体可以最大限度地支持可读性和文本区域的可读性。这种行动随后通常有助于提高参与度并降低跳出率。

情感影响： 不同的插图会带来情感和不同的观点。通过选择相应的正确自定义字体，设计师实际上是在调节网站访问者如何看待网站内容。

为网页设计提供网页排版，使其更具个性，更好地代表公司。

为了利用自定义字体的设计，设计师——就像开发人员一样——应该理解它们如何有效地集成到网站中。这个过程涉及

选择正确的字体： 战略性地、独特地将字体与公司身份对齐，同时考虑网站的用途非常重要。网页设计师可以考虑风格，使文本易于阅读，然后确保所制作的表格与网站具有相同的设计。

实现自定义字体： 可以通过使用 @font-face 规则将自定义字体加载到网页中来使用它们。此规则允许设计师命名所需的字体文件，以便它可以处理属性赋值，如 font-family、font-style 和 font-weight。

优化性能： 然而，当自定义字体的加载速度增加时，也会对网站速度产生不利影响。网页设计师应该能够考虑文件格式、压缩方法和缓存技术，以缩短加载时间。

考虑可访问性： 虽然沉迷于花哨的字体可能很诱人，但实际上，在这种情况下，您应该优先考虑可用性。因此，创作者将尝试从不同的移动设备阅读他们选择的字体，并改变他们的视力。此外，预加载自定义字体以及定义备用字体可以保证即使自定义连字体未下载，文档仍然可以阅读。

自定义字体在网页设计中独树一帜，它们要么增强网站的视觉吸引力，要么与受众建立强烈的情感联系。选择合适的字体，通过适当的组合使其有效，并针对性能和可访问性进行优化，这些都是宝贵的设计策略，当它们结合在一起时，产生的视觉元素就能实现其目的并在互联网大众中脱颖而出。当您熟悉自定义字体时，请记住它们如何改进您的设计并为用户与之的互动增加价值，这是您需要做的。

选择自定义字体

您应该对您为网站选择自定义字体时要多加小心，因为它是一个重要因素，有助于设计出视觉上吸引人且连贯的网页，其中容纳了您的品牌形象并增强了用户体验。在本章中，我们将研究选择自定义字体的方法，例如字体来源的技巧、牢记您网站的风格和品味、了解不同的字体风格和字体系列，以及共同解决性能和许可问题。

获取自定义字体

选择自定义字体是第一步。在开始之前，您需要知道在哪里可以找到自定义字体。您可以使用 Google Web 字体等著名字体库。自定义字体有许多来源，包括

在线字体市场： Google Fonts、Adobe Fonts 和 Font Squirrel 等应用程序提供各种免费和付费字体，可以轻松集成到您的网站中。

独立字体铸造厂和设计师： 大部分时间里，小型字体铸造厂和设计师是富有创意和卓越的自定义字体的作者。支持独立艺术家可以帮助创建鲜为人知的独特设计。

字体订阅服务： 例如 Adobe Fonts 等公司的订阅服务，每月付费即可访问庞大的字体库。上述服务非常倾向于高质量，并包含特殊的自定义选项和商业许可。

网站的上下文和目的

选择自定义字体时，请考虑网站的上下文和目的

品牌形象： 您使用的字体应该能够传达您经过深思熟虑的品牌形象及其价值。例如，让我们选择一个高端品牌：他们可以使用经典的优雅衬线字体，考虑到一家科技公司——他们会选择干净的现代无衬线字体。

目标受众： 考虑并纳入受众的偏好以及整个受众的消费习惯。合适的字体和字体现应吸引大多数人，并有助于提高客户的积极性和信心。

内容类型： 有时，根据数据类型，不同的单字母数字比其他字母数字更好。标题和正文可以利用不同类型的字体，标题应更清晰地区分，而正文应易于阅读和可见。

字体风格和字体系列

自定义字体有各种类型，包括连字、衬线或无衬线，以及不同的风格和设计系列。字体系列是用于创建具有共同设计和来源的字体集的整体风格。了解这些选项可以帮助您做出明智的决定

衬线 vs. 无衬线： 像衬线这样的字体在其结尾的细小笔画特征，而无衬线字体没有相同的收尾。无衬线字体与现代、简洁的外观相关；另一方面，衬线字体则带有古老和华丽的意味。

手写体和装饰字体： 这些字体更像是“字母数字”，其中字母要么复杂，要么富有表现力，这使得它们适合品牌、标志设计和标题。尽量少量使用它们以在设计中保持和谐。

粗细和风格变化： 一些字体在设计时就考虑了粗细或倾斜（例如，细体、常规体、粗体带斜体或倾斜）。它确实可以通过分类和引入主要、次要和第三重要性的元素来帮助您。

性能考虑

自定义字体可能会影响您的网站性能，因此考虑优化策略很重要

文件大小和格式： 自定义字体文件，即使它们丰富了网站的视觉方面，也会增加页面加载时间。优先选择 WOFF 和 WOFF2 等压缩字体格式，您还可以使用这两种格式，这也会减小文件大小。

子字体： 利用字体子集化，它将只包含您需要的字符，从而减小文件大小和加载时间。

字体显示： 为了让浏览器控制字体在加载过程中的应用方式，请使用 CSS 中的 font-display 属性。开发人员可以使用 swap 或 fallback 等选项来呈现内容，即使字体加载时间很长，也可以显示内容，而不是空白。

使用 @font-face 规则

@font-face 规则是 CSS 中一项了不起的功能，它通过使用外部来源的自定义字体将网络字体引入网站。该规则在自定义字体方面缺乏特异性，可以全局或局部使用 @font-face 属性加载。然后使用 font-family 属性将其应用于文本元素。在本章中，我们将详细探讨 @font-face 规则，包括语法、字符风格、各种字体格式的使用和输出指南。

开始使用 @font-face 规则

@font-face 规则提供了定义您想要的任何字体的灵活性，这些字体可以轻松应用于您网站上的任何元素。该规则本身是一个带有字体参数的 CSS 块：源、系列名称、字体类型和粗细。因此，当一个设置自定义字体时，浏览器会使用指定的字体系列名称通过应用字体来渲染元素。

@font face 规则的语法

@font-face 规则的基本语法包括

font-family: 指定字体系列的名称，格式应为 jpg、png 和 pdf。这就是您在 font-family 属性中调用以将字体应用于元素的内容。

src: 指定字体文件的位置。我们的密码是我们保护个人信息的虚拟锁。它可能只是一个或两个 URL 来以不同格式提供字体文件。

font-style: (可选) 它可以规定字形（例如，正常点、斜体，反之亦然）。

font-weight: (可选) 而是设置字体粗细（例如，正常、粗体）。

这是一个 @font-face 规则的示例

这里，有一个名为 'MyCustomFont' 的特定字体，代码使用该规则来识别 WOFF2 和 WOFF 格式的相应源文件。

指定字体属性

除了 font-family 和 src，您还可以指定可选属性来定制字体的外观和行为

font-style: 此外，font 属性指示文本的样式，无论是正常、斜体还是倾斜。例如，如果您决定使用斜体文本，则会将该属性设置为 italic。

font-weight: `font-weight` 属性决定显示哪种字体，它是字重的一种评级（即，`normal`、`bold`，甚至是一个数值——`300` 或 `700`）。通过不同的字重，可以构建文本结构，如标题和正文。

使用不同的字体格式

为了让所有浏览器都以正确的方式显示字体，您必须注意源属性并在那里提供多种字体格式。常见格式包括

WOFF 和 WOFF2： 它们具有最大的兼容性，并且通常可以加快整个下载速度。

TTF (TrueType)： 另一种最流行的格式，另一方面，它不如 WOFF/WOFF2 有效（甚至更糟）。

EOT： 然而，Internet Explorer 的旧版本是浏览器的主要目标。

通过用逗号分隔来在 src 属性中指定多种格式

授权 @font-face 的建议

字体显示策略： 应用 font-display 属性来预设字体在渲染过程中的显示方式。web-font-force-fallback 等选项定义了文本在自定义字体正确加载之前，可以使用备用字体而不是自定义字体来渲染。

性能优化： 尽可能遵循使用适当格式（WOFF/WOFF2）和字节码子集化字体仅限于所需范围的原则。

许可合规： 确实，请验证您使用的所有字体都已正确许可。为了确定，请阅读使用条款并遵守任何引用政策。

@font-face 规则，反过来，是一个非常强大的工具，它使您能够通过实际在网页设计中集成自定义字体来实现自己的愿景。通过实施最佳的自定义字体网站实践，您可以使您的网站看起来专业且功能齐全，因为您将实施与您的品牌形象和设计目标相关的字体。研究并使用各种字体和设置，以确定最适合您的网站和受众需求的内容。

应用自定义字体

使用 CSS 采用不同的字体非常容易，可以确保您的网页具有视觉吸引力且连贯。在您创建了自定义字体并通过 @font-face 准备好后，您无需担心，因为它们可以使用 CSS 属性插入到不同的元素中。本段将介绍如何使用 font-family 属性添加您自己的字体，通过各种粗细和样式创建文本层次结构，以及优化字体的原则。

使用 font-family 属性

要将自定义字体应用于元素，请在 CSS 中使用 font-family 属性

这里的选择器 'MyCustomFont' 是由 `@font-face` 规则标识的那个。安装为备用字体，万一指定的自定义字体加载失败，则会替换 Sans-serif 字体。

将自定义字体应用于特定元素

可以使用选择器来为您的网站塑造不同的字体样式，这些选择器决定了包含您想要自定义的 CSS 字体的元素。例如

标题： 您的网站应该为标题使用自定义字体，创造一个视觉上令人愉悦且和谐的示例，以便您的品牌在众多同类产品中易于识别。

正文文本： 为正文文本选择不同粗细的字体，以增强或使其易于阅读和清晰。

导航和链接： 自定义字体是一种虚拟化妆品，可以增加导航菜单和超链接的吸引力，从而使它们更具吸引力。

创建文本层次结构

使用自定义字体的不同粗细和样式可以帮助创建文本层次结构，使内容更易于扫描和理解：s

字体粗细： 自定义字体通常带有粗细选项（即，常规、粗体、细体）。通过将它们作为断点，形状和设计就可以引起优先注意。

字体样式： 这些自定义字体具有一组多样的不同样式，不同于主字体（例如，斜体、倾斜）。使用它们可以使事物更有趣并区分它们。作者本可以使用标点符号，如逗号或感叹号，来强调情感并拟人化自然。

应用自定义字体的最佳实践

备用字体： 始终要有资源字体，以避免不希望的结果。这样做将避免在字体未加载时用户失去兴趣的情况。

一致性： 在网站的所有页面上始终使用字体。这些一致性使布局具有全面的外观并提升了活动。

可访问性： 确保您的字体可读且具有足够的可访问性。确保您通过在不同设备以及不同屏幕尺寸上使用各种字体来测试可读性。

优化： 选择字体缩小并使用高效格式（WOFF、WOFF2），以优化网页加载字体所需的时间以及整个网站的性能。

附加考虑事项

用于特定目的： 尽管许多网站所有者都可以使用自定义字体来美化他们的设计，但他们必须适度使用。在标题、导航和号召性用语等重要设计部分中使用它们，并以可选且宽敞的方式使其具有影响力。

字体许可： 确保您拥有正确的字体许可和使用自定义字体在您的网站上的正确权限。即使在商业干预期间也要牢记这一点。

为您的设计使用自定义字体可以为您的网站增添出色的视觉效果，并且您可以将其与您的品牌联系起来。考虑使用 font-family 属性获得特定奖励，以设置整个页面并确保您的用户几乎可以立即找到他们正在寻找的内容。继续进行操作教程，例如使用备用字体、最大化网站性能和保护可访问性，为用户提供无缝愉快的体验。使用不同的字体、粗细和样式来玩转您的网站设计，直到您最终创建出独特且适合网站特定功能的组合。

字体格式和浏览器兼容性

熟悉字体格式范围及其 Web 浏览器兼容性是设计师在网页设计中选择自定义字体时的一个重要因素。字体格式代表了字体的复杂性以及它是否会在各种浏览器中正确渲染。在这里，我们将介绍最常用的字体格式以及它们的特点。此外，还将介绍选择正确的格式以实现兼容性和性能的方法。

常见字体格式

在不同的字体选项中，浏览器决定最佳显示选项。最常见的格式包括

WOFF (Web Open Font Format)： WOFF 是一种在浏览器中广泛使用的格式，提供双重压缩以及 Web 字体的浏览器兼容性。它基于现有的字体格式，如 TrueType 和 OpenType，专为 Web 使用而量身定制。

WOFF2： WOFF2 取代了 WOFF，采用精炼的算法，提供更好的压缩和性能。这主要是当今首选的 PHP 应用程序框架，也是 Web 的最佳选择，并且主要受当前浏览器支持。

TrueType (TTF)： TrueType 当前位格式是一种常用的旧格式（尽管移动应用程序使用 OpenType 格式），也广泛用于桌面应用程序。与 MQA 类似，它得到许多浏览器的支持；然而，这种压缩方法可能不是最有效的，例如 WOFF 或 WOFF2，因为它们的文件大小更小，加载速度更快。

OpenType (OTF)： OpenType 字体格式是一种多功能格式，能够显示高级排版功能。与 TrueType 类似，它是最流行的格式；然而，有时它不像 WOFF 和 WOFF2 那样使用压缩。

嵌入式 OpenType (EOT)： EOT 是 Microsoft 专有的字体格式和字体嵌入技术，用于早期版本的 Internet Explorer。如今，各种浏览器替代方案在处理其他格式方面做得更好，因此其使用量有所下降。

浏览器兼容性

某些浏览器可能在字体格式的可用性方面有自己的政策。以下是字体格式与流行浏览器兼容性的概述

WOFF： 通过支持 Chrome、Firefox、Safari、Edge 和 Opera 等所有现代浏览器来扩大您的广告系列范围。

WOFF2： 浏览器兼容，并且被大多数现代浏览器用户使用，包括 Chrome 和 Opera。WOFF2 是完美的组合，应与 WOFF1 和其他格式一起使用以获得最佳兼容性。

TrueType (TTF)： 添加类链接可能对用户有帮助，但在某些旧版本的浏览器中可能无效。

OpenType (OTF)： 它是大多数浏览器中最受欢迎的字体类型之一；不过，与 TrueType 类似，它在旧版本中运行可能存在限制。

嵌入式 OpenType (EOT)： 首先由旧版本的 IE8 及更早版本推广和偏爱的碳酸饮料。随着现代浏览器被大多数人使用，使用“Meta Description”的搜索引擎优化技术正在失去吸引力。

选择正确的字体格式

选择网站字体格式时，请考虑以下最佳实践

使用 WOFF 和 WOFF2： 它们在减小尺寸、跨浏览器运行和兼容性方面取得了良好的平衡。为了确保当前 Web 浏览器版本、设备类型和操作系统上的真正支持，请同时使用这两种格式。

包含 TTF 和 OTF 作为备用： 在字体格式支持方面，WOFF 及其较新版本 WOFF2 应该是您的首要任务，而 TTF 和 OTF 是有用的备用方案，以防最新技术不支持它们。

提供 EOT 用于旧版支持： 如果您的网站浏览器需要支持 Internet Explorer 的旧版本，请包含 EOT 格式作为备用。

优化字体格式以获得性能

以最大限度地提高性能，同时确保浏览器兼容性

子字体： 缩小字体会缩短文件，前提是只包含这些字符，然后围绕加载时间旋转，前提是它已包含在字体中。

使用字体压缩： WOFF 和 WOFF2 这两种格式可以压缩它们的文件，从而减小尺寸。它减少了页面加载时间并节省了互联网流量，从而实现了在线商店的顺畅运行。

指定多种格式： 确保您的 @font-face 规则包含多种字体格式，以使您的字体效果与各种浏览器和设备兼容。

性能考虑和备用字体

在网页设计中，字体至关重要，但必须考虑它们对性能的影响和备用方案。这样做是为了确保流畅的用户体验并保持可访问性。使用自定义字体可以改善您网站的外观，但如果包含过程管理不当，它也可能最终减慢其速度。在本节中，我们将重点关注使用自定义字体时的性能限制，以及声明备用字体以确保向后兼容性和可访问性的必要性。

字体文件大小

使用高效格式： 使用 WOFF 和 WOFF2 压缩格式，以确保文件大小足够小，并缩短加载时间。

字体子集化： 子集化是一种为您的网站创建字体样式的方法，它只加载您的网站所需的字符，从而减小了字体文件的大小。

字体加载策略

异步加载：强制使用不同的库来异步加载字体。因此，可以避免阻止页面上其他内容的渲染。

预加载字体： 使用 `<link>` 标签和 `rel="preload"` 属性，为关键字体分配高加载优先级。

字体缓存

利用浏览器缓存： 浏览器对字体的缓存对用户很有利，因为它可以防止下次访问时再次下载。为您的字体文件设置适当的缓存头。

优化字体数量

限制字体变体数量： 减少您在网站上使用的字体系列、粗细和样式的数量，以保持较低的加载时间。

合并字体： 如果可能，使用不同字重或字体的样式来避免字体种类过多。

字体显示属性

使用 font-display： 使用此 CSS 属性，可以在加载字体时以无可挑剔的质量显示字体。选项包括

auto： 如果系统执行此类操作，可能会出现文本缺失。

block： 隐藏因字体未加载而不可见的文本，但可能会延迟内容渲染。

swap： 第一个选项是先加载备用字体，然后在字体加载完成后切换到自定义字体。

fallback： 如果自定义字体未在短时间内加载，浏览器会立即回退到默认或旧字体。

optional： 它类似于 fallback，但区别在于超时时间相当长。

备用字体

备用字体的重要性

保持可读性： 备用字体允许字体不加载，文本保持可读。

改善用户体验： 字体故障不会留下空白屏幕或“不可见文本闪烁”（FOIT），表明所需内容可立即获得。

指定备用字体

使用 font-family 属性： 在 CSS 中指定自定义字体名称，然后在列表中每个备用字体后跟一个逗号。从当前兼容性最佳的适当替代项开始，最后以通用字体系列结束。

这里自定义字体名称为 'MyCustomFont'，将按 'Times New Roman' 和 Times 作为备用字体，serif 作为通用字体系列的顺序应用。

选择备用字体

匹配字体特征： 如同探险一样，为备用目的制作切换字体（例如，衬线、无衬线），这将保持一致性。

考虑系统字体： 利用任何系统字体作为备用，以确保它们适用于所有适用的设备。

测试和监控

测试字体加载： 在不同设备和浏览器上测试您的网站在字体加载条件下的外观和性能。

监控性能： 通过使用 Google Lighthouse 或浏览器开发者工具进行评估，这将有助于识别其性能影响和备用策略。

自定义字体的最佳实践

使用自定义字体是必不可少的工具，可以对您网站的整体视觉印象和品牌形象产生显著影响，因此必须遵循某些准则。这些程序将提供关于优化网站性能、为访问者提供可访问性以及实现一致设计的正确解决方案。在本节的第一部分，我们将讨论使用自定义字体的良好实践，然后我将提供一个要点列表作为总结。

在软件应用程序或网站中开发和实现自定义字体确实已成为设计师的常见做法。这项技术有助于创建独特的排版元素，以表达特定的情绪、传递品牌信息等。

明智地选择字体

匹配品牌形象： 选择合适的自定义字体以及适合您品牌风格和信息的字体，以保持视觉设计的一致性。

优先考虑可读性： 请记住，您选择的字体必须易于阅读和清晰，尤其适用于您的正文。

优化字体使用

子字体： 字体子集化提供了仅包含网站实际使用的字符的功能。这有助于减小文件大小并进一步提高网站的加载时间。

限制变体： 限制您需要使用的字体粗细和样式的数量，以保持字体文件总大小不会过高。

利用高效格式

使用现代格式： 利用 WOFF 和 WOFF2 格式，它们在压缩和浏览器兼容性方面是最佳的。

包含备用： 考虑包含多级格式作为备用，以与旧浏览器配合使用（例如：TTF、OTF、EOT）。

控制字体加载

利用 font-display： 您可以使用 CSS 中的 font-display 属性在字体加载期间自定义它，同时塑造文本。IOS 或 fallback 等解决方案通过避免隐藏文本来提升用户体验。

预加载字体： 使用带有 rel="preload" 的 `<link>` 元素，优先加载所需的字体，从而优化性能。

指定备用字体

提供备用： 在设置 CSS 时，使用 font-family 属性作为自定义字体的备用。它有助于在自定义字体加载失败时保持文本易于阅读。

匹配字体特征： 选择具有相似特征的备用字体，例如衬线和无衬线，以保持视觉一致性。

确保许可合规

了解字体许可： 密切关注自定义字体的许可条款，以便正确使用它们，尤其是在商业项目中。

遵守归属要求： 如果重要，请遵循字体创建者或分发者等其他公司的归属说明。

跨设备和浏览器测试

检查兼容性： 尝试在手机、平板电脑、电脑屏幕和浏览器等不同设备上检查自定义字体的性能，并呈现类似的效果。

监控性能： 继续通过使用性能监控工具来评估自定义字体对您的网站加载速度和整体性能的影响。

结论

自定义字体是让您的网站脱颖而出的绝佳机会，从而创造出独特而精致的用户体验。通过遵循最佳实践，例如选择正确的字体、明智地应用字体、利用特定格式、控制字体加载、提供备用字体、注意许可条款以及测试字体在不同平台上的性能，可以创建真正出色的设计，从而提高易用性和可用性。

通过字体自定义，您可以为您的 Web 项目添加设计细节，并将它们融入到统一的惊人外观和感觉中。通过遵循推荐的字体样式，如使用正确的字体、优化使用、采用高效字体格式、控制字体加载、为模糊情况声明所需的字体、必要时获取许可，并在移动设备、平板电脑、笔记本电脑和浏览器上进行测试，您可以实现所需的美学效果以及性能和可访问性。此外，在自定义字体的使用与可读性和可访问性标准之间取得平衡，可以提高用户兴趣并带来更好的订阅者体验。然后，您需要将这些实践与您的网页设计工作流程对齐，以更有效地处理字体，并构建一个对于所有用户来说视觉上统一且清晰的网站。