Wordpress Lightbox显示UTF-8字符而不是箭头

我的woocommerce lightbox产品库存在问题

当查看产品图像时，它们显示为（我相信是）UTF-8字符，而不是箭头。我发现它的发生不一致，前一分钟它会显示箭头，下一分钟它会再次显示

E008

代码。这里有一个屏幕盖来展示我的意思：

我尝试过禁用我所有的插件，清除缓存等等，但似乎没有什么能解决这个问题。我的元标记中也指定了正确的字符集

这种情况尤其发生在Firefox中，但Chrome有时也会出现箭头显示问题

---

如果有人知道问题是什么（是我这边的问题还是浏览器问题等等），我非常感谢任何帮助

应该发生什么

prettypto.css

（WooCommerce插件的一部分）中的prettypto样式有一个定义为

WooCommerce

的字体图标。样式的完整定义如下：

@font-face {
    font-family: "WooCommerce";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("../fonts/WooCommerce.woff") format("woff"), url("../fonts/WooCommerce.ttf") format("truetype"), url("../fonts/WooCommerce.svg#WooCommerce") format("svg");
}

然后，他们使用这个图标字体来设置这些按钮的样式，如

prettypto.css

所示：

div.pp_woocommerce .pp_arrow_next:before, div.pp_woocommerce .pp_arrow_previous:before {
  font-family: WooCommerce;
  content: "\e00b";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  text-indent: 0;
}

问题

Firefox（出于某些我不完全理解的原因）表现得好像不知道

WooCommerce

图标字体是什么

我确实看到一个问题。。。SVG文件（作为其

@font-face

声明中的引用）不正确。请访问此处查看：

我唯一怀疑的是，Firefox在解析CSS时碰到了SVG，并将其炸掉（从而使Firefox认为字体不可用或不可用）。我希望Firefox能够优雅地降级并转到下一个可用的

src

要确认这是否是问题所在，您可以尝试几种方法

从

/plugins/WooCommerce/assets/fonts/

中删除

WooCommerce.svg

。也许Firefox可以接受缺少的svg而不是坏的svg

从

prettypto.css

文件中删除对它的引用。（它是一个缩小的文件，因此查找起来会有点困难，但它正好位于文件的开头，因此查找起来应该不会太糟糕）

---

如果这解决了问题，我会将问题报告给WooCommerce支持团队。这只会暂时解决。（如果你更新插件，但他们没有解决问题，那么它会再次为你中断）.

我在两种浏览器中都遇到了相同的问题，我的第一个嫌疑犯是apache中的

WooCommerce

大小写敏感度，并试图用小写字符替换它，但仍然失败。 经过几个小时的努力，我终于发现问题出在

/wp content/plugins/yith-woocommerce-ajax-navigation/assets/css

（第220行）中的css文件中：

ul.yith-wcan-list li.a:之前{
字体系列：woocommerce；
说：没有；
字体变体：正常；
文本转换：无；
-webkit字体平滑：抗锯齿；
文字装饰：无；
字体大小：400；
线高：1；
/*内容：“"; */ /* 非常感谢您的深入回复！我按照您所说的做了，首先尝试删除文件并删除css中的引用。不幸的是，两者都没有成功。我将向Woocommerce发送一条消息，让他们知道这一点。再次感谢您的帮助。非常感谢！）
ul.yith-wcan-list li.chosen a:before{
    font-family: woocommerce;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    font-weight: 400;
    line-height: 1;
    /* content:""; */ /* <<== here was the problem source in my case */
    color: #a00;
    margin-right: .618em;
}