Web Fonts 网页字体与桌面字体的区别

·62 次浏览

让我们来聊聊字体吧!如果你从未广泛使用过字体,你可能从未需要了解网页字体和桌面字体之间的区别。今天,我们将深入探讨这些差异,并分享一些我们最喜欢的字体资源!

什么是桌面字体?

桌面字体的工作原理类似于它的名字——从你的桌面运行。使用桌面字体时,你只需下载字体文件并将其安装在你的计算机上。

它是如何工作的

大多数桌面字体文件会以.zip 格式下载,然后你会提取一个以**.otf .ttf 结尾的文件,偶尔也会是.ps1**(如果你真的想深入了解这些差异,请查看**这篇文章**,但对于在你的计算机上运行字体而言,这并不重要) 。

一旦你正确安装了桌面字体,你就可以在任何运行计算机字体库的应用程序中使用它们——如 Word 、 Excel 、 PowerPoint 、 Photoshop 等。

如果一组字体是你品牌标识的一部分,并且你需要在营销材料或其他图形中使用它们,这将非常方便。通过在计算机上使用的应用程序中提供桌面字体,你可以轻松地在所有视觉效果中匹配你的品牌字体,从而在品牌中创建一致性。

为什么在网站上使用桌面字体而不是网页字体?

博客作者在对他们的网站进行调整时并不总是知道如何编写代码来渲染和样式化网页字体,而是依赖桌面字体来完成工作。在这些情况下,他们会在 Photoshop 或 Canva 等创意应用程序中输入标题或其他文本片段,然后将其保存并上传为图像。

需要明确的是,这不是最佳做法。这样使用这些图像会减慢网站的加载时间,并且这些文本无法被 Google 抓取。因此,使用桌面字体渲染文本会对你的 SEO 产生负面影响,如果一切加载缓慢,可能还会影响用户体验。此外,大多数字体许可不允许你以这种方式使用桌面字体。

唯一的例外是当桌面字体在标志中使用时——将标志上传为图像或矢量文件是很常见的!但是,确保你在标志中使用的任何字体都获得了这样的使用许可。

除了标志外,唯一其他常见的原因是,如果你正在使用一个独特的字体,而这个字体作为网页字体不可用,但却增强了网站的设计——也许你想在某个地方使用这个字体,比如作为插图的一部分的大型号召性用语,或每篇博客文章底部的签名。在这些情况下,同样要确保桌面字体许可允许这种类型的使用。

但在大多数情况下,不应该使用桌面字体来创建你网站上的文本。更好的解决方案是网页字体!

什么是网页字体?

与桌面字体不同,你不会在计算机的软件应用程序中使用网页字体。相反,在构建博客或网站时,网页字体是指示你的网站以特定字体 (有时是样式,如粗体或_斜体_) 渲染文本的内容。

可以通过多种方式安装网页字体。以下是最常见的方法:

  1. 使用插件: WordPress 用户可以选择安装一个插件,如 Use Any Font,以上传他们喜欢的字体并在整个网站上应用它们。对于大多数主题,使用插件应用字体需要了解 CSS,以便你可以定位和样式化字体。
  2. 使用 Adobe Fonts: 使用 Adobe 的 Creative Cloud 平台,你可以通过他们的服务直接运行网页字体。一旦你成为订阅者,只需将你想要的字体添加到一个 web kit 。然后,你必须指示你的 CSS 从 Adobe 获取网页字体。这并不难,但确实需要一些 CSS 知识 (Adobe 提供了关于如何在 WordPress 中使用他们字体的教程这里,几乎任何网页开发人员都知道如何为你处理这些!) 。
  3. …或其他字体服务!: Adobe Fonts 并不是唯一一个以这种方式托管字体的服务。**Google Fonts**是另一个完美的例子,而且是免费的!实际上,如果你在 Blogger 上运行博客,Google Fonts 是更改博客字体的最简单方法之一。
  4. 使用 @font-face 集成字体:这些选项中最 「高级」 的是,可以将网页字体文件上传到你的服务器,并直接在你网站的样式表中进行样式化。

想知道从像 Adobe Fonts 这样的外部服务运行的网页字体是什么样子吗?你现在看到的就是一个例子!

如果你从这些网站购买并下载字体,你需要使用 @font-face 方法将它们集成到你的网站中。通过这样做,这些文件将直接安装到你网站的 「根」 或索引文件中,这意味着你的网站将从自己的服务器上运行这些文件 (而不是像 Adobe Fonts 那样从其他人的服务器上运行) 。


网页安全字体

所有网站,无论设计如何,都会在某种程度上使用网页字体。这是为了确保如果由于某种原因网页字体无法加载,字体可以渲染 (并且网站内容可以被阅读) 。

例如,如果 Adobe Fonts 宕机了 (哎呀,互联网会变得很难看!),网页安全字体将代替你现在看到的 Quasimoda 字体渲染。实际上,有些网页字体可以直接写入 CSS 代码,并且会自动出现在任何人的浏览器中,因为这些字体被认为是标准或**「安全」 网页字体**。这些 「安全」 网页字体包括:

  • Georgia
  • Palatino Linotype
  • Book Antique
  • Times New Roman/Times
  • Arial/Helvetica
  • Comic Sans
  • Impact
  • Lucida Sans Unicode/Lucida Grande
  • Tahoma/Geneva
  • Trebuchet
  • Verdana
  • Courier New

样式化网页字体

一旦你在你的网站上安装了网页字体,你可以使用 CSS 以各种方式调整字体。

这包括像**字体大小行高(段落中文本行之间的距离),字母间距**(句子中字母之间的距离,也称为字距),以及字体是否可以加粗、下划线、斜体或更改为你选择的颜色。很酷,对吧?

字体、许可和法律问题

检查许可

如果你在线上找到并爱上了一种字体,重要的是要检查它是否同时可作为网页字体和桌面字体——前者是为了你的网站可以使用它,后者是为了你可以在你的计算机上使用它,比如名片、信头或其他宣传材料。

另外,不要忘记,根据你购买的地方,购买网页字体和桌面字体可能会产生两个不同的费用。我们总是喜欢提醒客户,如果我们在他们的项目中使用了一种特殊的字体,他们可能会被收取两次费用:一次是桌面版本的费用,以便我们在设计他们的网站时可以使用它,其次是网页字体版本的费用,最终我们会将其安装在他们的服务器上。

检查最终用户许可协议 (EULA)

字体就像其他类型的软件一样,通常包括一个最终用户许可协议或 EULA,其中规定了它们的使用方式。在使用任何字体时,无论是免费的还是购买的,一定要仔细阅读许可协议,以了解你可以在哪里以及如何使用该字体。

这样想:你花了很多时间为你的博客创建内容,如果人们窃取你的内容并将其用于盈利、非法手段或其他你不舒服的方式,你可能会有一些想法。创造字体的艺术家和小企业也不例外——尊重字体许可总是一个好的做法。

例如,一些字体创作者禁止在标志或其他合并材料中使用,因此在将你喜欢的字体用于品牌中之前,尤其是如果你计划将来注册你的标志作为商标,请务必阅读细则。

使用免费字体或 「仿制」 字体怎么样?

同样,你可能会遇到一些网站,似乎提供 「免费」 版本的字体,看起来几乎与其他地方找到的付费字体相同。在这里要谨慎行事——由于数字文件的性质,人们常常会在这些类型的网站上上传字体文件,将其命名为其他名称,并免费分发艺术家的作品。换句话说,这些字体可能是盗版字体。

当你刚开始时,使用一个看似免费的版本的昂贵字体是很诱人的,但请记住,你可能是在从艺术家或小企业那里偷东西。关于使用免费字体,请选择信誉良好的网站,如 Google Fonts,或我们在下面提到的那些提供免费字体的网站。

发表评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

分类目录

快速接入中国本土生态体系——

「文派叶子」

立即加入 50 万中文社区站点