Question

我的woocommerce灯箱产品库~~you can see on my website here~~

有问题

当看到产品图像时，它们显示为（我相信的）UTF-8字符，而不是箭头。我发现它发生不一致，一分钟它会显示箭头，下一个它会再次显示E008代码。这是一个显示我的意思的屏幕截图： ~~http://puu.sh/atg2C.jpg~~

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

特别是在Firefox中，但Chrome有时也无法显示箭头。

如果有人知道问题是什么（是我的问题还是浏览器问题等等？）我真的很感激任何帮助！

Answer 1

应该发生什么

prettyPhoto.css（WooCommerce插件的一部分）中的PrettyPhoto样式有一个名为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");
}

然后他们使用这个图标字体来设置这些按钮的样式，如prettyPhoto.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声明中作为参考是不好的。请访问此处查看：~~http://switch-witch.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg~~

我唯一怀疑的是Firefox在解析CSS并弹出时会攻击SVG（从而使Firefox认为该字体不可用或不可用）。我希望期待 Firefox优雅地降级并转移到下一个可用的src。

要确认这是否是问题，您可以尝试一些事情。

从WooCommerce.svg删除/plugins/woocommerce/assets/fonts/。也许Firefox可以用丢失的SVG而不是一个坏的？
从prettyPhoto.css文件中删除对它的引用。（这是一个缩小的文件，所以它会更难找到，但它在文件的开头是正确的，所以找到它不应该太糟糕。）

如果这样可以解决问题，我会将问题报告给WooCommerce支持团队。它只会暂时修复。（如果您更新插件并且他们还没有解决问题那么它会再次破坏你。）

Answer 2

我在两个浏览器中遇到了同样的问题，我的第一个怀疑是我的apache中的WooCommerce案例敏感度，并尝试用低字符替换它，但它仍然失败了。经过几个小时的挣扎后，我终于发现问题来自/wp-content/plugins/yith-woocommerce-ajax-navigation/assets/css中的css文件（第220行）：

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;
}

所以我评论出来，现在一切都很好。

灯箱显示UTF-8字符而不是箭头

2 个答案: