首页 >CMS教程 >WordPress >如何在WordPress中使用Web字体

如何在WordPress中使用Web字体

Lisa Kudrow原创: 2025-02-16 08:47:09203浏览

最近，每个人似乎都在谈论龙虾。不是海洋的甲壳类动物，而是网络字体。对于那些尚未听说过的人，龙虾是一个流行的Google字体的一个很好的例子，该字体嵌入了网页中。

嵌入字体并不像您想象的那么新。早在1998年，CSS 2引入了 @font-face规则。从理论上讲，这使设计人员能够将任何truetype或postscript字体下载到用户计算机中以在网页中显示。不幸的是，当时，只有Internet Explorer 4支持该规则。人们普遍担心许可昂贵的字体会被盗用。如今，CSS 3仍然无济于事，但所有网络浏览器都支持该规则。从那时起，屏幕分辨率也得到了巨大改进。因此，如果您还没有接受字体嵌入，那么现在是时候这样做了。

钥匙要点

>
>使用@Import，link或javaScript等CSS方法在WordPress中实现字体，或使用插件以更轻松地集成。>
>对字体的最基本支持级别来自用户使用的操作系统。这可能为台式机或笔记本电脑系统提供数十个字体，可在Android上使用三种字体。不幸的是，这仍然是一个相当相当的运气系统。我们都知道，设置为16px及以下时，在基于Windows的机器上的外观较差，并且在某些OS X的某些较旧版本上，Arial看起来不太奇妙。
>这些差异中的许多差异之所以发生，是因为原始的Apple Mac操作系统与每英寸72的旧印刷技术相关。因此，在显示屏上分配了10点字体10个像素。当时，Apple提供的垂直（肖像）监视器与标准纸的大小相同，并且可以从屏幕上进行直接的一对一比较与印刷版本进行比较。另一方面，微软选择了96ppi的基础，人们将距离计算机监视器的距离额外1/3，而不是从印刷页面上。因此，所有内容在基于Windows的计算机上都渲染了1/3。自1990年代这些技术出现以来，事情已经走了很长一段路，现在我们有无数不同的屏幕尺寸和解决方案可以处理。但是，除非您指定字体，否则用户的设备和浏览器仍将为您选择字体。>
>另一个问题是某些组织限制了用户计算机上的字体。我曾经在一个仅安装了佐治亚州和威尔达纳的计算机的组织工作。这样一来，员工发送的信件和电子邮件只能使用与公司身份相匹配的字体发送。

充分利用内置字体

>尽管没有使用公司字体，大多数台式机和笔记本计算机 - 都为Web项目的Microsoft Core Fonts创建了字体。 1996年的这件字体包括Andale Mono，Arial，Arial Black，Comic Sans MS，Courier New，Georgia，Impact，Times New Roman，Trebuchet MS，Verdana和Webdings。虽然，这些字体或它们的等效物的版本可以依赖于大多数台式机和笔记本电脑上，但浏览器可能不会按照您的预期显示字体。
可以使用A
font stack
来最大程度地限制此类限制。这为浏览器设置了CSS规则，以使用许多字体之一。它始终包括一个捕获所有衬线（在中风的末端带有小点缀）或sans-serif（没有点缀）。因此，我们可能拥有字体家庭：Cambria，“ Hoefler Text”，“ Liberation Serif”，Times，“ Times New Roman”，Serif。浏览器应浏览您的“堆栈”，并使用用户计算机上存在的第一个定义字体显示文本。如果找不到任何一个，它使用的后备字体在此示例中定义为serif。

的目的是选择一系列字体，这些字体在各种不同的分辨率和变焦级别的范围内都很好地渲染。 >在这里对加拿大设计师Amrinder Sandhu的字体堆栈进行了很好的讨论。 不幸的是，如果您的观众正在使用手持设备，则使用字体堆栈无济于事。 Android设备使用Droid Sans，Droid Serif和Droid Sans Mono，而Apple iOS设备使用具有各种样式和重量的Helvetica Neue。

>您可能希望与依赖多种操作系统和版本的内置字体相比，对WordPress页面的外观有更多的控制权。我们可以通过嵌入字体来克服这一点。
>
现在，让我们看一下可用的Web字体的类型。
>
>免费字体

>绝大多数可用字体都以某种方式获得许可。当您购买已安装操作系统的计算机，平板电脑或手机时，部分费用是字体的许可。但是，有多种使用多种自由嵌入字体的方法。
>
嵌入式字体是字符集，该字符集从第三方平台上下载到用户的计算机，该页面处于活动状态，并且在页面关闭时丢失。这使得服务公司可以保留对字体的控制，但允许您显示使用该字体以付费以使用该字体。有大量提供字体的公司。最著名的是：

该平台可能是最受欢迎的免费字体服务，可能是最受欢迎的免费字体服务，提供了700多个设计良好的字体，包括龙虾。
>
>付费字体
尽管自由字体流行，但仍然有大量的字体铸造厂提供高级字体。例如，类型的Foundries档案列表列出了近300个创建者和提供优质字体的网站，尽管并非所有这些都可以嵌入网页中。
> 在提供用于网络使用的高级字体的组织中，德国字体商店也许是付费字体最受欢迎的市场。有高质量的字体，以及异常的字形，例如Ulrike Rausch的厨房水果和蔬菜，叉子和刀，锅和家用电器，Liebecook。

如果您有一个Adobe Creative Cloud帐户，则自动可以访问Adobe的Typekit服务。 Typekit提供450多个字体。注意到的是，虽然许可证允许您在打印出版物和个人非商业网站中使用字体，但如果您为客户端工作，则只有在拥有Adobe Business帐户时才可以使用Web字体。 Adobe建议您在开发过程中为客户设置帐户，并将其交给他们。这是一个缺点，如果客户端未能支付其帐户，则该站点将恢复为您已定义的字体堆栈中的后备字体，即系统字体。
在WordPress页面和帖子中获取想要的字体

>有许多插件可让您在WordPress网站上使用Web字体，并且简单的Google字体是最受欢迎的字体之一。我不会专注于本文中的插件，而是通过对主题进行更改来查看如何手动执行此操作。此外，市场上的某些主题配备了各种Web字体选项。
>
实际代码因服务而异。我将概述Google字体的方法以及Adobe Edge/Typekit。其他服务以类似的方式工作。不过，首先，请记住备份您的网站（或理想地使用单独的开发副本），并在文件的副本上工作，以防万一出现问题。应使用儿童主题进行样式更改，以便每次更新主题时都不会覆盖您的更改。
Google字体

>有三种方法（除了插件），用于在WordPress页面上显示外部字体，并使用Google字体：@Import，link和javaScript。

选择字体后，单击“快速使用”按钮。如果提供，请检查所需的权重和样式，以及字符集（S）。>
接下来，您需要选择嵌入方法。最简单的方法是将@Import规则添加到您要修改主题的style.css文件中。将代码放置在样式中的位置似乎无关紧要。但是，@Import将阻止其他任何内容下载，直到完成任务为止。因此，如果您打算将此方法用于多种字体，则应将请求组合到一个@Import规则中。

第二种方法同样简单，它使用链接方法，并且代码包含在标准选项卡上。这次，代码放在header.php文件中。将代码放在文件顶部。然后，您可以将字体的名称添加到字体堆栈中。请记住将其添加为第一个字体，其次是首选系统字体和后备字体样式。
>在这里值得注意的是，Google Web Fonts博客指出，如果在 @font-face声明之前存在脚本标签，那么Internet Explorer将在FONT文件完成下载之前不会显示任何页面内容。因此，如果文件无法下载，则可能留下空白或部分加载页面的Internet Explorer用户。因此，请尽早将 @font-face声明放在文件中。
>另一种方法是
enqeue functions.php文件中的字体。下面显示的功能将加载所需的字体样式和权重。>
最后，您可以使用JavaScript加载字体。有一些争论和反对使用JavaScript的论点，但是关闭JavaScript的用户数量很少。该代码位于子主题的标题.php中，该代码位于和标签之间。 Google再次建议它应该是第一个元素，这样的字体将加载，而页面负载的其他部分则应该避免“未风格的文本”。>

> Adobe Edge Web字体和Typekit 在WordPress中添加Adobe Typekit字体
略微简单一点。尽管您可以使用与Google字体的类似方法使用类似的方法，但经验较低的开发人员可以将Typekit字体用于WordPress插件。安装后，插件将出现在您的设置菜单中。同样，请记住在进行这些修改之前备份WordPress。
>

>使用Typekit，通过Creative Cloud应用程序登录到您的帐户。选择字体后，创建一个套件。给您的套件一个名称，然后添加您使用该字体的网站的域名。输入网站详细信息后，您将获得一块JavaScript。使用纯文本编辑器（例如Textedit或Notepad）复制并将其保存在文本文件中。>

>下一步是选择您的字体，将其添加到网站套件中，然后发布。添加您希望使用并发布的任何其他字体。>

发布套件后，请转到WordPress插件的Typekit字体。

>添加您保存在文本文件中的代码。>
>根据需要添加CSS代码选择器。在示例中，我添加了后标题显示为H1文本（WordPress页面和帖子标题是H1文本。）。我还添加了主体文本中的H2子标题的子标题。请注意，在命名选择器之前，最好检查名称是否已在主题中使用。您可以使用浏览器中的开发人员工具检查元素来做到这一点。不要忘记刷新您的屏幕按照您进行的每次更改，可能需要几分钟才能在您的网站上使用该字体。
>
>最后，还建议您每次使用字体时始终指定字体重量和字体式属性。同样，这有助于您控制多种可能的平台上字体显示的控制。
>
结论
在您的网站上添加字体是生产诱人网站的一种公认方法。这也可能是使常用的WordPress主题在其他所有方面脱颖而出的好方法。但是，不要只是因为您可以 - 我可以 - 我在高中视觉通信中的第一个任务之一就是计算谷物包装上的字体数量（有25个字体上有25个字体，玉米片包！）。字体通常更少，而将自己限制在两个或三个设计通常是最好的做法，这不仅是从加载速度的角度来看，而且是视觉设计的观点。
Google在Pop Out中提供了一个字体配对功能，该按钮位于“快速使用”按钮旁边，以帮助您开始。图形设计是一种需要数年掌握的工艺，但是嵌入几个好的字体将确保您选择的所有用户都可以看到您选择的设计。
>
经常询问有关在WordPress中使用Web字体的问题
>如何将Google字体添加到我的WordPress站点？主题编辑器，然后找到header.php文件。将复制的链接粘贴在头标签中。最后，您可以通过引用字体家庭中的字体中的字体来使用字体。
>我可以在WordPress中使用自定义字体吗？您可以通过将字体文件（通常为.ttf或.otf）上传到WordPress主题目录，然后使用CSS将字体应用于您的网站。请记住在使用字体之前检查该字体的许可。
>如何更改WordPress中的字体大小？

>您可以使用CSS更改WordPress中的字体大小。转到外观>自定义> WordPress仪表板中的其他CSS，然后添加CSS规则以更改字体大小。例如，要将所有段落的字体大小更改为16px，您可以使用以下CSS：p {font-size：16px; 。。网络安全字体的示例包括Arial，Times New Roman和Courier New。，您可以简单地引用CSS中的字体。例如，为了将Arial字体用于所有段落，您可以使用以下CSS：P {font-fot-family：arial; 。例子包括时代新罗马和佐治亚州。另一方面，sans-serif字体没有这些小线条。示例包括Arial和Helvetica。

>如何在WordPress中使用serif字体？

在WordPress中使用serif字体，您可以在CSS中引用字体。例如，要使用佐治亚州的字体用于所有标题，您可以使用以下CSS：H1，H2，H3，H4，H4，H5，H6 {Font-Font-family：Georgia; 。您可以通过使用CSS将不同的字体应用于不同的HTML元素来做到这一点。例如，您可以使用一条字体进行标题，而另一个字体用于正文文本。

>在将其应用于我的网站之前，我如何预览WordPress中的字体？
>您可以在中预览字体通过使用插件（例如Easy Google字体），WordPress。该插件允许您在将其应用于网站之前在WordPress Customizer中预览字体。
我可以使用Google字体上不可用的字体或在标准的Web-Safe字体上使用的字体吗？ >是的，您可以使用Google字体上不可用的字体或标准的网络安全字体。您可以通过将字体文件上传到WordPress主题目录，然后使用CSS将字体应用于您的网站。请记住在使用字体之前检查该字体的许可。