字体

的 字体字段 是typography字段的单一用途兄弟姐妹:一个下拉,一个值,字体系列编辑器从系统字体和google字体列表中进行选择,您的小部件将姓氏作为纯字符串接收在主插件内 小部件生成器的,这使得它成为当小部件只需要改变一个元素使用的字体时,没有其他任何东西的轻量级选择。

Font 字段支持 条件、仅当 “定制排版”切换打开时才显示它,并且其值通过 打印 Twig-语法模板引擎 进入您的 CSS。指南都涵盖设置和限制。

与此不同 版式字段(通过选择器工作,没有模板令牌),字体字段是令牌字段。您编写的 font-family CSS面板中统治自己,并将字段的值打印到其中,那个差异决定了给定小部件需要这两个字段中的哪一个。

Font 字段的作用 #

• Widget的Elementor面板中呈现字体系列下拉,列出系统字体和谷歌字体。
• 例如,将所选系列存储为普通字符串 Lora 或 Georgia.
• 将该字符串打印通过 {{ your_field_name }}通常是 a 内部 font-family CSS面板中的规则。
• 恰好控制一个属性。大小、重量、间距和其他内容将保留在您的样式表中或单独的控制中。
• 采用默认姓氏,因此小部件附带故意的字体。

还没建小部件吗?的 小部件生成器概述 是现场级文档之前的起点。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个带有名为字体的字段的拉引小部件 quote_font 这仅更改引文文本的字体。

如何添加字体字段 #

拖动 字体 从字段面板到下面的部分 风格 tab,它的自然家园,尽管任何一个选项卡都可以。一旦它降落,它的选项就会在左侧打开。

解释了字体字段选项 #

Option列表很短, 这是字段的点:

• 标签: elementor 中下拉位置旁边显示的文本,例如 “Quote Font”。
• 名称: your模板所指的唯一标识符。字母、数字、下划线仅,例如 quote_font.
• 默认: 例如,小部件开头的姓氏字符串 Georgia。在任何人触摸控制之前选择一些渲染效果良好的东西。

CSS面板中连接字体字段 #

Font字段是一个令牌字段,CSS面板是它的令牌所属的地方,将值打印在a里面 font-family rule 并始终以后备堆栈跟随它:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

该代币呈现给所选的姓氏,因此上面的规则变为 font-family: Lora, Georgia, serif; lora时,编辑器选择。大小和行高保持您的;控件仅交换字体。

该令牌也适用于 HTML 面板,例如在特定家庭处于活动状态时切换类的条件中,但 CSS 是其实际用途。

小心: 在此下拉中选择 Google 字体不会加载字体文件。与 Typography 组控件不同,字体字段不会自动输入 Google 字体,因此所选的 Web 字体呈现为其后备,除非网站以其他方式加载它。要么让小部件加载字体本身,一个附加 Google 字体样式表链接的小型 JS 面板注入器起作用,要么限制对网站已有的字体堆栈的期望。令牌之后的那个后备堆栈不是可选装饰;这是访问者在不加载家庭时看到的。

JS面板中的最小加载器如下所示:

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

该装载机的一个微妙之处是: getElementById guard 键固定 id,所以如果同一个小部件在两个不同族的页面上出现两次,只有第一个实例的字体加载,第二个默默回落,如果每个页面多个实例是你的小部件的现实场景,则从姓氏中构建 id。

使用 Elementor 中的字体控件 #

Elementor 中的页面中添加自定义小部件,或者如果页面已经打开,则重新加载编辑器。字体字段显示为标签下的下拉;打开它,并且家庭列表可在您键入时搜索。

Pick一个家庭,预览更新,如果小部件加载字体,文件一到新字体就拉进来,否则元素渲染从你的堆栈回退。

常见用例 #

• 引用和推荐小部件 其中只有引文文本交换字体。
• 装饰标题 在英雄和横幅小部件中,正文未受影响。
• 字母组合、下盖和标签元素 它带有一张显示面。
• 暴露单一品牌选择的小部件 无需向客户打开完整的排版面板。
• 条件类切换式(HTML)面板中当一个家庭需要额外的字母间距规则时的值进行比较。

Font 字段工作的提示 #

• 始终编写后备堆栈。 font-family: {{ quote_font }}, Georgia, serif; 当未加载选定的字体时,保持小部件可读。
• 请记住,没有自动队列。 Google字体选择在这里需要一个加载器在小部件或一个网站加载他们已经;那是该领域的一个尖锐的边缘。
• 当您需要更多时,请联系印刷。 大小、重量、间距、响应值和自动字体加载都属于 版式字段。字体适用于仅限家庭的情况。
• 设置真正的默认值。 明确的起始家庭节拍继承了主题级联的任何内容。
• CSS中保留令牌。 CSS面板中的一条规则比分散在HTML中的内联样式属性更容易维护。
• 请勿在此处期待选择器快捷方式。 该领域的自然接线是您自己的代币 font-family 规则,您还可以控制后备。

常见问题 #

包裹起来 #

Widget Builder 字体字段执行一项表面很少的工作:面板中的家庭下拉、面板中的字符串令牌 font-family rule,并完全控制你手上留下的后备力量,当你提供google家庭时加载字体,然后向上迈进 版式字段 当小部件需要完整的文本样式面板时。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。