专注于外贸建站,分享WordPress教程和Elementor教程

GeneratePress:文字排版教程

更新日期:2022-06-14
同系列教程推荐
加入读者学习群
我用的页面编辑器
企业邮箱
我用的主机

支持我创作内容,就和我一起用Cloudways主机吧~

让我的客户网站GTmetrix测分A\A的主机
独家优惠前3个月优惠30%, 戳上方按钮注册即可自动带入优惠码LOYSEO
用Gmail邮箱,注册易通过
主机送Astra Pro不限站点1年
遇到问题,联系我

本教程讲解如何在GeneratePress主题中配置网站的文字排版,比如全局字体设置、为网站的heading、body元素指定字体、字号等等。

您可以在自定义(customize) > 排版(typography)中找到GeneratePress主题的字体管理与排版管理功能。

下图中,我添加了两个谷歌字体,并且分别指定给了网站里的Heading(标题)元素,Body(正文)元素。

GeneratePress:文字排版教程

接下来就分别说一下字体管理和排版管理。

字体管理

打开排版面板后,您将看到字体管理器。

GeneratePress:文字排版教程

单击搜索字体选项框,你将看到系统字体和Google 字体列表。您可以从下拉列表中选择一种字体或输入要搜索的字体名称搜索。

GeneratePress:文字排版教程

选择字体后,您还可以选择可用的字体变体

如果你选的字体是 Google 字体,那么会看到一个Google 字体选项自动被打开开关 了。

如果你的Google 字体是安装在本地的,请确保不要打开此开关。

GeneratePress:文字排版教程

要直接添加本地安装的字体,请在 Font family name 字段中直接输入这个字体的名称。

GeneratePress:文字排版教程

谷歌字体显示

Google font-display 的下拉列表中有 5 个选项,通常建议你选swap,因为,默认情况下,谷歌字体是渲染阻塞的,可能需要一段时间才能加载,但大多数浏览器会在字体加载之前,隐藏文本,这就引起用户浏览页面时出现闪烁,也会导致Google Pagespeed给网站测评时出现警告,所以我们使用swap,它将在谷歌字体加载完成前,使用系统默认字体展示网页的文字。

GeneratePress:文字排版教程

排版管理

排版管理功能可以让你:指定网站的元素,并授予上文中添加的字体。

GeneratePress:文字排版教程

选择元素后,您将看到可用的排版选项。

排版选项

下图中,我们来设置Heading 1,Heading 1 通常用于文章、页面中的标题。

GeneratePress:文字排版教程

在图中,我们能看到:目标元素(target elemet)、字体系列(font family)、字体粗细(font weight)、文本转换(text transform)、电脑/平板/手机图标用于控制不同设备上的数值,简称响应式、字体大小(font size)、行高(line height)、字母间距(letter spacing)、下边距(bottom margin)。

  • 字体系列:此选项控制字体管理器中创建的字体列表中的字体系列。
  • 字体粗细:此选项控制字符轮廓相对于其高度的粗细。
  • 文本变换
    • Normal:不改变字体的大小写,保持原样
    • capitalize:每个单词的第一个字母都是大写
    • uppercase:所有字母都将大写
    • lowercase:所有字母都是小写
  • 字体大小:控制文本的大小。
  • 行高:控制一行文本的高度。
  • 字母间距:控制文本字母之间的横向间距。
  • 响应式:通过单击桌面/平板电脑/移动图标,为不同的设备设置不同的数值。
  • 下边距:一些元素(如正文标题)有一个底部边距选项,用于控制文本下方的间距。
  • 单位:可用单位有:px、em、rem、%(仅适用于字体大小),如果想了解这些单位,请看这篇文章

谷歌字体变体

为您选择的 Google 字体选择所需的字体变体(variants),是很重要的,因为每一个必须加载的变体,都让您的网站必须加载一个额外文件,减少加载的变体数量将会加速您的网站,并且有时候相当明显的优化了网站速度。

让我们以 Open Sans 为例:

GeneratePress:文字排版教程

默认情况下,我们拥有如下所有变体:

  • 300 – 超轻
  • 300italic – 超轻,斜体
  • regular – 常规的
  • italic – 斜体
  • 600 – 半粗体
  • 600italic -半粗斜体
  • 700 – 粗体
  • 700italic – 粗斜体
  • 800 – 超级粗
  • 800italic – 超粗斜体

现在,如果我们的网站只需要其中的几个变体,就可以删除其他不需要的,这样网站会加载得更快。所以,下面是一个内容网站所需字体的示例:

  • 300 – 某些情况下,可能用于装饰做小标题
  • regular – 用于正文内容
  • 700 – 用于标题

那么,我们就按下图所示设置变体

GeneratePress:文字排版教程

现在,如果我只是为我的网站标题加载不同的字体,我知道我的网站标题只会是一种样式 – 浅色、粗体、斜体等。这意味着我们可以指定唯一一个变体我们需要这个领域。

点赞
0 / 5 5

Your page rank:

让我的客户网站GTmetrix测分A\A的主机
独家优惠前3个月优惠30%, 戳上方按钮注册即可自动带入优惠码LOYSEO
用Gmail邮箱,注册易通过
主机送Astra Pro不限站点1年
遇到问题,联系我
建站学习交流群