WordPress主题字体图标无法正常显示的原因及解决办法

释放双眼,带上耳机,听听看~!
字体图标由于其轻量、灵活、清晰以及良好的浏览器兼容性已经被广泛用于web开发当中,WPCOM线上的WordPress主题也都内置了字体图标库可供使用。不过在实际使用当中还是有部分用户遇到了一些问题,最

字体图标由于其轻量、灵活、清晰以及良好的浏览器兼容性已经被广泛用于web开发当中,WPCOM线上的WordPress主题也都内置了字体图标库可供使用。不过在实际使用当中还是有部分用户遇到了一些问题,最常见的问题就是图标无法正常显示。

无法正常显示的原因静态文件跨域

由于字体文件是不允许跨域的,如果网站对静态文件使用了CDN加速启用了单独的二级域名的话,那么页面在加载字体文件的时候就会遇到字体跨域的问题。

判断是否是字体跨域问题导致可以使用

Chrome浏览器

访问网站,鼠标右键菜单点击

检查

调出开发者工具,然后在开发者工具选择

Console

选项,观察界面是否有

Access-Control-Allow-Origin

的红色报错提醒关键字。

https访问下引用了http的静态文件

如果网站启用了https的话,则需要使用https的静态文件(css、js、字体、图片)。wordpress正常情况下会自动识别https协议并对css、js文件自动替换成https,不过某些时候由于服务器架构原因(比如反向代理)会有识别成http的情况出现。

服务器未添加MIME类型

这个问题一般出现在windows服务器IIS比较多,如果没有添加MIME类型访问字体文件会报404的错误。

判断是否是未添加MIME类型导致的问题可以使用

Chrome浏览器

访问网站,鼠标右键菜单点击

检查

调出开发者工具,然后在开发者工具选择

Network

选项,再选择

Font

,看下是否有红色404状态的字体文件,如图:WordPress主题字体图标无法正常显示的原因及解决办法 网站开发

css编码的问题

如果css文件编码不对,也会导致字体图标无法正常显示,一般是显示乱码。

解决办法跨域问题

跨域问题可以通过添加

Access-Control-Allow-Origin: *

头信息来解决。

如果是使用了CDN,可以咨询CDN服务商客服如何添加,根据我们了解的情况,简单说下常用的CDN设置方法:

七牛看网上说是需要设置

Referer 防盗链白名单

,在白名单里面添加网站的域名进去,不过实际测试还是需要在源站添加

Access-Control-Allow-Origin: *

头信息,然后清除七牛的CDN 缓存。

腾讯云进入CDN

域名管理

,点击需要配置的域名进入

高级配置

,点击

添加HTTP Header

,设置

Access-Control-Allow-Origin

,值为

*

,如图:WordPress主题字体图标无法正常显示的原因及解决办法 网站开发

阿里云进入CDN

域名管理

,选择对应域名点击

管理

,进入

缓存配置>HTTP头>添加

,如图:WordPress主题字体图标无法正常显示的原因及解决办法 网站开发

https与http问题

如网站启用https,则需将所有静态文件全部修改成https即可,具体可以找下wordpress https配置相关教程。

添加MIME映射

服务器需要添加以下格式的mime映射,前面是格式名,后面是mime类型:

.svg             image/svg+xml.woff            application/x-font-woff.woff2         application/x-font-woff

具体添加方式的话,如果是虚拟主机可以找下主机后台管理面板,一般是可以自己添加的,如果是iis服务器,可以参考下图:WordPress主题字体图标无法正常显示的原因及解决办法 网站开发

css编码的问题

这个问题可以联系开发人员处理,目前我们的最新版付费wordpress主题暂不存在此问题

作者:wpcom官方

相关专题

wordpress

Wordpress WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。 立刻购买 交流圈子 推荐模板/插件 虚位以待 马上入驻 虚位以待 马上入驻 虚位以待 马上入…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到论坛反馈!

联系我们

© 转载请声明:转载自“龙萱坤诺"

网站开发

SuperPWA:一个把wordpress变成APP的的插件

2019-3-15 15:03:58

网站开发

JustNews主题3.0用户中心数据迁移指南

2019-3-16 12:33:08

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6169

    评论

    4

    粉丝

    6

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    722

    评论

    2

    粉丝

    2

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    288

    评论

    26

    粉丝

    7

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    133

    评论

    63

    粉丝

    7

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    70

    评论

    12

    粉丝

    2

    关注

    0

    Wordpress建站服务商