"字体"字段将字体系列下拉添加到您使用主插件构建的自定义小部件中 小部件生成器。编辑器在 Elementor 中选择系统字体或 Google 字体,小部件将其应用到您选择的元素上。它仅更改字体。大小、重量和行高保留在您的 CSS 中。
Font是免费版的小部件生成器中可以使用的字段之一,免费插件包含有限的小部件生成器,全套字段自带 硕士插件专业版.
Font 字段的作用 #
- Elementor 中为小部件的面板添加一个可搜索的下拉。该列表有一个 默认 选项,a 系统 组(阿里亚尔、塔霍马等)和一个 谷歌 团体。
- 例如,将姓氏保存为文本
Playfair Display. - 写a
font-family您列出的元素的规则 CSS 选择器。当选择是 Google 字体时,Elementor 会为您加载页面上的该字体。 - 还会给你一个令牌,比如
{{ quote_font }},那印着姓氏。
建筑商的新手?阅读 小部件生成器概述 首先,然后打开小部件返回。
在开始之前 #
- WordPress 已安装并处于活动状态。
- 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
- Widget 生成器中打开的一个小部件,本指南中的示例是一个 “拉报价”小部件:一个名为的文本区域
quote_text、一个名为的文本字段quote_author并且有一个名为的字体字段quote_font这设置了引号的字体。
如何添加字体字段 #
- 去 主插件 > 小部件生成器 并打开您的小部件。
- 单击 风格 tab并添加一个部分,例如“报价样式”。
- 类型
font在左侧的字段搜索框中。 - 拖动 字体 into the section。点击字段上的铅笔, 打开它的设置。
样式是编辑器期望找到字体选项的地方,但该字段也适用于内容或高级部分。
解释了字体字段选项 #
- 标签: elementor 中下拉上方的文本,例如 “Quote Font”。
- 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如
quote_font. - 描述: elementor 中下拉下显示的提示。
- 默认值: family 的小部件的新副本以。输入名称时,请完全按照 Elementor 列表中的显示方式进行输入,例如
Playfair Display.
在"常用设置"下,您会发现 显示标签, 标签块, 分离器 並 条件的,其工作原理与其他字段相同,使该字段工作的设置是 CSS 选择器.
使用 CSS 选择器应用字体 #
向下滚动到 CSS 选择器 然后单击 添加项目。每行有两个方框:
- CSS 选择器: get字体的元素。对于拉报价来说是
.pq-quote。你不需要打字{{WRAPPER}}的,因为构建者会为你添加它,并保留这个小部件内的规则。 - CSS 属性: 写的规则。
{{VALUE}}被挑选的家庭取代。
font-family: "{{VALUE}}", Georgia, serif;
新行填充了示例文本, .text-1, .text-2 並 color: {{VALUE}};.两者一并更换,如果离开 color properties 框中,字体名称最终会变成一个颜色值,并且字体不会改变。
周围的引言 {{VALUE}} 使用 Playfair Display 等空格保留名称,使其正常工作。 Georgia, serif 是字体加载时的后备。要对更多元素进行样式设计,请再次单击"添加项目"并添加另一行。
离开平原 选择器 底部的框为空。在我们的测试中它写道 color: Lora; 对于这个字段,它不设置字体。
单击 保存设置 当你完成后。
为什么不将令牌放入 CSS 面板中? #
该令牌在那里有效。 font-family: "{{ quote_font }}", Georgia, serif; prints right name。的问题是加载。在我们的测试中,前端没有加载仅通过令牌使用的谷歌字体,因此访问者看到了后备字体。CSS 选择器行给 Elementor 提供了加载字体所需的信息,并且相同的选择正确地通过。
将令牌保留为需要名称作为文本的地方,例如 HTML 中的类或标签。
使用 Elementor 中的字体控件 #
将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。label下单,开始打字过滤列表,每个姓氏都是用自己的字体画出来的,这样挑选起来就比较容易了。
Pick一个家庭和预览更新,在发布的页面上,Elementor将Google字体与小部件的样式一起加载。
选择 默认 clears pick。widget然后回落到你的CSS面板或主题为该元素设置的任何字体,所以在CSS面板中给元素一个合理的字体。
常见用例 #
- 拉引号和感言,其中只有引号文本更改字体。
- 以英雄或横幅小部件显示标题,仅保留正文。
- 使用品牌展示字体的价格编号、徽章或标签。
- 编辑器应选择字体的客户端网站,但不要触摸大小和间距。
Font 字段工作的提示 #
- 使用 CSS 选择器而不是令牌进行造型。 这就是 Google Fonts 加载的原因。
- 始终添加后备堆栈 之后
{{VALUE}}的,如Georgia, serif或Arial, sans-serif. - CSS面板中放大小和重量。 Font字段只设置了家庭。
- 还需要尺寸、重量和间距控制? 的 版式字段 是一个将它们全部捆绑在一起的专业领域。
- 每个 Google 字体都会添加下载。 每页两到三个家庭是一个合理的限制。
常见问题 #
Font字段在免费版中可用吗?
是字体是免费版的小部件生成器中可以使用的字段之一,全套小部件生成器字段自带Master Addons Pro。
为什么我的 Google 字体没有显示在实时页面上?
检查字体如何应用,如果仅在 CSS 面板中打印令牌,则字体文件未加载。添加 CSS 选择器行 font-family: "{{VALUE}}" 所以 Elementor 加载它。
为什么选择字体什么也没改变?
CSS 选择器行可能仍然有示例 color: {{VALUE}}; property,或者选择器与您的html不匹配。将属性更改为 font-family 并检查类名。
我需要将 {{WRAPPER}} 添加到选择器吗?
号建造者补充道 {{WRAPPER}} 在选择器前面,因此字体仅适用于此小部件。
Font和字体排印有什么区别?
Font设置家族只。Typography是一个Pro字段,它在一个控件中添加了大小,重量,行高,字母间距等。
包裹起来 #
"样式"部分添加"字体"字段, 设置默认系列, 并添加指向的 CSS 选择器行 font-family: "{{VALUE}}" at your element。Elementor 中编辑器会得到一个可搜索的字体列表,而 Google 字体会在页面上加载,而无需额外代码。有关全文样式,请参阅 版式字段,并检查 定价 对于每个计划包含的内容。
