建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

使用 @Font-Face 和 CSS3 向 WordPress 添加自定义字体

GG网络技术分享 2025-03-18 16:05 0


无论您是创建一个新的 WordPress 主题还是只是自定义一个主题,自定义字体都可以帮助您更新主题的风格。

虽然浏览器有内置的默认字体,你可以在你的 样式.css 文件,使用其他人使用的相同字体可能看起来有点乏味。

幸运的是,使用 CSS3 添加您自己选择的字体相对容易 @font-face 规则。 所需要做的就是将字体上传到您的服务器,然后使用一些小 CSS 片段将其添加到您的主题中。

让我们看看如何为您的 WordPress 主题执行此操作。

  • 寻找字体
  • 上传你的字体
  • 将字体添加到主题
  • 结论

寻找字体

有很多地方可以免费找到很棒的网络字体,例如 FontSquirrel 或 Adob​​e Edge Web Fonts。 只需确保您选择的字体具有适合您需要的许可证。

并非所有免费字体都可以用于商业用途,但您可以从许多地方(例如 Typekit)购买用于商业用途的高级字体。

还有两种主要的字体:Serif 和 sans-serif。 Serif 字体的边缘有卷曲,而 sans-serif 字体则没有。

这可能会帮助您记住两种字体类型之间的区别。

下面有趣的图片可能会帮助您记住这两种类型之间的区别。

衬线字体中的字母“S”,在顶端卷曲在边缘的部分有一个孔。 标题写着:“我拍摄了衬线字体。”
这个笑话是一个远射,但希望它有效。

选择新字体后,您需要下载其文件。 请记住,有不同类型的字体文件,并且它们并非在大多数主要浏览器中都兼容。

以下是不同类型字体及其文件扩展名的快速摘要:

  • TrueType 字体 (TTF) – 兼容 Internet Explorer 9.0 及以上版本、Chrome 4.0 起、Firefox 3.5、Safari 3.1 及 Opera 10.0 起
  • OpenType 字体 (OTF) – 与 TrueType 字体具有相同的浏览器兼容性
  • Web 开放字体格式 (WOFF) – 受 Internet Explorer 9.0 及更高版本、Chrome 5.0 开始、Firefox 3.6、Safari 5.1 和 Opera 11.1 支持
  • Web 开放字体格式 2.0 (WOFF2) – 仅 Chrome 36.0 起支持,Firefox 35.0 起,Opera 26.0 起
  • 嵌入式 OpenType 字体 (EOT) – 仅适用于 Internet Explorer 6.0 及更高版本。

Web 开放字体格式已成为标准,因为字体经过压缩以减少带宽消耗并包含额外的元数据。 不幸的是,它们并不总是可供下载。

如果您在查找此类文件时遇到问题,TrueType 和 OpenType 字体更易于下载,并且仍然是不错的选择。

上传你的字体

一旦您找到了您希望使用的字体并按照来源的说明下载文件,就可以将其上传到您的服务器了。 在此之前,最好在进行任何更改之前备份整个站点。

有关创建完整备份的详细信息,请查看我们的其他几篇文章:如何使用快照备份您的 WordPress 网站(和多站点)和 7 个已审查的顶级高级和免费增值 WordPress 备份插件。

最好将它添加到您的主题的文件夹中,可以在下面找到 wp-content > 主题 > 你的主题. 您可以选择创建一个“字体”文件夹来存放您的文件以使事情井井有条,特别是如果您计划添加多种字体。

解压缩打包的文件并将内容上传到您的主题文件夹。

在 cPanel 中,单击 文件管理器 下方的按钮 文件 在主页上。 如果打开一个弹出窗口,请选择您网站的位置,然后选择 按钮。 导航到您的主题文件夹,然后单击 上传 页面顶部的按钮。

cPanel 中“上传文件”页面的屏幕截图。 上传文件路径突出显示。
您应该能够将文件权限保持为 644 并且不会遇到任何问题。 如果您收到权限错误,请尝试删除文件并使用不同的权限重新上传。

点击 选择文件 按钮 上传文件 页面并从您的计算机中选择字体文件。 选择并打开后,文件将自动上传,无需单击此页面上的其他按钮。

无论您将字体文件放在哪里,都需要记住它的文件路径。 它将在此页面上以粗体显示在单词之后 选择要上传到的文件.

将字体添加到主题

要让您上传的字体实际出现在您的主题中,您需要在您的主题中调用它 样式.css 文件,您可以在下面找到 wp-content > 主题 > 你的主题.

最好先创建一个子主题,这样当您的主题推出更新时,您的更改不会丢失。

如果您从头开始创建主题,这通常不是问题,但如果您正在编辑预先存在的主题,您可以查看我们的其他几篇文章,如何创建 WordPress 子主题和如何在 WordPress 中自动创建子主题,了解如何制作子主题的详细信息。

在 cPanel 中,选择文件,然后单击 编辑 页面顶部的按钮。 如果您之前没有禁用弹出窗口,则会出现一个。 如果是这种情况,请单击 在底部。

将以下代码复制并粘贴到文件中,最好是在引用字体的位置。 确保每个 CSS 块和您输入的代码之间有一个换行符。

不要忘记将字体名称替换为您上传的字体名称,并更新代码以反映正确的文件路径。

多次添加相同的 CSS 代码来定义粗体、斜体、标题文本等,确保更新文件名和路径以反映字体的用途。

最后,定义您的字体将与更多 CSS 一起使用的位置,例如在下面的示例中:

在此示例中,所有段落文本都将使用新的(虚构的)字体。 将此代码更新为您自己的规范并保存文件后,您的新字体将在您的站点上可见。

结论

使用这些说明,您应该能够在主题中添加新字体而不会出错。 尽管如此,如果您更喜欢更简单的解决方案,仍有许多插件可以帮助您添加字体而无需任何编码。

事实上,我们已经在我们的文章 Top WordPress Custom Fonts Plugins Reviewed 中列出了最好的。 如果您想要一个方便的指南来选择正确的字体,我们也有一个帖子:关于 WordPress 排版,您“知道”的大部分内容都是错误的。

有关在 WordPress 中使用字体的更多信息,请查看 Codex:使用字体。 如果您在添加字体时遇到麻烦,请打开支持票,我们的支持英雄可以回答您的问题。

标签:

标签: WordPress op

提交需求或反馈

Demand feedback