WordPress革命滑块Slider Revolution使用自定义字体

Slider Revolution革命滑块是Wordpress非常流行的banner滑块功能插件,通过它可以组合元素和设定动画,效果等来定义丰富的轮

Slider Revolution革命滑块是Wordpress非常流行的banner滑块功能插件,通过它可以组合元素和设定动画,效果等来定义丰富的轮播图滑动效果。有时候我们想在滑块里使用自定义字体,可以通过Custom Font的功能来引用下载的第三方字体,实现slider revolution自定义字体

文章目录
隐藏

1
字体下载和修改

2
定义 slider font class

3
引用自定义字体

字体下载和修改

在跨境E站的这个示例中,我们将使用sofia-pro这款字体。 将下载好的字体包解压,可以获得eot,ttf,woff,woff2等字体格式文件以及一个stylesheet文件。

WordPress革命滑块Slider Revolution使用自定义字体WordPress革命滑块Slider Revolution使用自定义字体
下载字体,修改stylesheet.css

将该字体下的全部文件上传到  wp-content/webfonts/ 路径下,如果没有可手动创建webfonts文件夹

使用Sublime text 3或其他编辑工具,修改之前本地下载的字体文件夹中的stylesheet.css文件,从里面复制你想引用的字体段代码,将其src引用路径修改,以绝对路径的形式呈现,域名更换为你的域名,如果是https站点请同步为https前缀,代码参考如下:

@font-face {
    font-family: 'Sofia Pro';
    src: url('https://www.example.com/wp-content/webfonts/SofiaProRegular-Italic.eot');
    src: local('http://www.example.com/wp-content/webfonts/Sofia Pro Regular Italic'), local('SofiaProRegular-Italic'),
        url('https://www.example.com/wp-content/webfonts/SofiaProRegular-Italic.eot?#iefix') format('embedded-opentype'),
        url('https://www.example.com/wp-content/webfonts/SofiaProRegular-Italic.woff2') format('woff2'),
        url('https://www.example.com/wp-content/webfonts/SofiaProRegular-Italic.woff') format('woff'),
        url('https://www.example.com/wp-content/webfonts/SofiaProRegular-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

如果你只需要引用该字体中的一种样式,修改对应的引用路径即可,如果需要引用全部的,那就需要修改全部的font-face的src

将改好的代码复制,粘贴到Slider Revolution的slider编辑区-Module’s-CSS/Jquery-Custom CSS

(adsbygoogle = window.adsbygoogle || []).push({});

WordPress革命滑块Slider Revolution使用自定义字体WordPress革命滑块Slider Revolution使用自定义字体
添加font-face代码段到custom font

定义 slider font class

选中要引用字体的文本layer段,切换到Layer option-attributes-classes,添加自定义内容:my-custom-font.

WordPress革命滑块Slider Revolution使用自定义字体WordPress革命滑块Slider Revolution使用自定义字体
添加自定义class属性
再次返回slider编辑区-Module's-CSS/Jquery-Custom CSS,接着后面添加一段新的代码:
.my-custom-font{
        font-family:'Sofia Pro' !important!;
}

引用自定义字体

Back返回slider revolution的主界面,定位到导航上的的Global Settings-Enable custom font selection in editor,输入之前自定义字体的font-family名称,如:Sofia Pro,再点击Save。

WordPress革命滑块Slider Revolution使用自定义字体WordPress革命滑块Slider Revolution使用自定义字体
Global Settings 启用自定义字体支持

再返回编辑slider,选中text文本图层- 右侧菜单-Text Layer-Style-“font-family”,搜索你之前添加的字体font-family名称,如本案例的Sofia Pro,选择后保存,字体就更新为你上传的自定义字体了。

WordPress革命滑块Slider Revolution使用自定义字体WordPress革命滑块Slider Revolution使用自定义字体
Slider的text layer里选择font-family
为主的祥助的知识星球为主的祥助的知识星球

版权申明:跨境E站,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权

          

原创文章,作者:跨境e站,如若转载,请注明出处:https://www.davidwu.net/archives/3620

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注