阿里国际站代运营:国际站托管代运营服务方案
亚马逊市场调研工具:挖掘你的亚马逊利基产品

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

分类: Slider Revolution革命滑块 作者: 为主的祥助 188次浏览 0评论

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

字体下载和修改

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

下载字体,修改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

添加font-face代码段到custom font

定义 slider font class

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

添加自定义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。

Global Settings 启用自定义字体支持

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

Slider的text layer里选择font-family
为主的祥助的知识星球
版权申明:跨境E站,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权
          转载请注明本文作者和原文链接: https://www.yunglobe.com/slider-revolution-custom-font.html

转载请注明:跨境E站 » WordPress革命滑块Slider Revolution使用自定义字体

微信 OR 支付宝 扫描二维码
请站长 喝杯星巴克
pay_weixinpay_weixin微信公众号
知识付费,金额随意 小主的支持是本站运营的动力!~
喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
QQ群
  • 阿里巴巴国际站数据化运营 阿里巴巴国际站数据化运营
  • Wordpress外贸建站交流群 Wordpress外贸建站交流群
微信号
  • 备注外贸建站或阿里国际站,拉你进对应的微信群
QQ咨询
  • 为主的祥助 点击这里给我发消息