Slider Revolution支持多种Google字体。但是,您也可以使用应用自定义网络字体。
- 相关话题
- 添加/编辑图层
- 图层样式
- 自定义CSS / JS
特别说明:
如果您希望使用的Webfont已经被WordPress主题加载,请跳至 下面的第2 部分或第3部分。
第1部分
在此示例中,我们将使用FontSquirell中的 Open Sans字体。访问该链接后,单击“ Webfont工具包” 选项卡,然后单击“ 下载@ font-face工具包” 按钮:
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/download-webfont-1.jpg)
接下来,解压缩下载的文件,然后打开名为How_to_use_web_fonts.html 的html文件,并查看本文档中的信息。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/webfontkit2-1.jpg)
接下来,单击下载的webfont 文件夹,然后单击opensans_bold_macroman 文件夹。在此文件夹中,您将看到以下字体文件:
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/webkit3-1.png)
接下来,使用ftp程序将字体上载到您的网站。对于此示例,我们将在wp-content 目录中创建一个名为webfonts 的新目录。因此,字体将在此处通过ftp上传:
wp-content / webfonts /
接下来,在文本编辑器中打开“ stylesheet.css”文件:
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/webkit2-1.png)
并将网址修改为绝对网址,以便从wp-content / webfonts / 目录中加载它们。这是一个例子:
@ font-face {
font-family:’open_sansbold’;
src:url(’http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot’);
src:网址(’http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot?#iefix’)格式(’embedded-opentype’),
网址(’http:// www .site.com / wp-content / webfonts / OpenSans-Bold-webfont.woff’)格式(’woff’),
网址(’http://www.site.com/wp-content/webfonts/OpenSans-Bold- webfont.ttf’)format(’truetype’),
url(’http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.svg#open_sansbold’)format(’svg’);
font-weight:正常;
字体样式:正常;
}
接下来,将此CSS复制到计算机的剪贴板中,并将其粘贴到模块的“自定义CSS”部分中。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-css-section-1-3.jpg)
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-css-font-1.jpg)
第2部分
要将字体正式应用于您的文本图层之一,请在编辑阶段选择“图层”,然后在“属性”部分中添加一个唯一的类。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/add-custom-class-1.jpg)
然后打开自定义CSS模式,并使用“!important”声明将字体应用于类。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-css-section-1-3.jpg)
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/apply-custom-font-1.jpg)
第三部分
导航到“ 全局设置”,然后找到“ 在编辑器中启用自定义字体选择 ”选项
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-font-1.png)
在文本框中插入“字体家族”名称。
示例:CustomA,CustomB
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/font-family-1.png)
然后,“字体家族”将出现在“文本层”>“样式”>“字体家族”下拉列表中
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。 [Slider Revolution 6] Slider Revolution支持多种Google字体。 但是,您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/text-layer-15.png)