woocommerce 的星级评分未在 chrome 上显示答案

【问题标题】：star rating for woocommerce not showing on chromewoocommerce 的星级评分未在 chrome 上显示
【发布时间】：2019-02-13 11:14:28
【问题描述】：

我正在使用 wordpress woocommerce，这个文件 woocommerce/assets/css/_fonts.scss 是否有这个代码。

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

@font-face {
    font-family: 'WooCommerce';
    src: url('../fonts/WooCommerce.eot');
    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');
    font-weight: normal;
    font-style: normal;
}

HTML 看起来像这样

<div class="star-rating">
   <span style="width:100%">Rated 
   <strong class="rating">5.00</strong> out of 5</span>
</div>

我也有所有的字体文件。它在 Firefox 上运行良好，但在 chrome 上显示一些奇怪的字符？知道如何解决这个问题吗？

font css here

更新：

我在 chrome 上注意到了这些错误

CORS 策略已阻止从源“https:MY_URL”访问“https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff”处的字体：“Access-Control-Allow-Origin”标头包含多个值“*，” , 但只允许一个。（索引）：571 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff net::ERR_FAILED （索引）：1 CORS 策略已阻止从源“https:MY_URL”访问“https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf”处的字体：“Access-Control-Allow-Origin”标头包含多个值“、*” , 但只允许一个。 (索引):657 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf net::ERR_FAILED

【问题讨论】：

标签： css google-chrome woocommerce

【解决方案1】：

搞定了，我在 stackpathcdn 上禁用了 CORS 标头，并将 woff 转换为 woff2 并将 css 更改为此。

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

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

【讨论】：

【解决方案2】：

我认为你需要将你的字体转换为 woff2 在我的情况下它可以工作，显然 chrome 可能会遇到不同格式的问题/

【讨论】：

转换并添加了这些url('../fonts/star.woff2') format('woff2'),url('../fonts/star.woff') format('woff'), 和url('../fonts/WooCommerce.woff2') format('woff2'),url('../fonts/WooCommerce.woff') format('woff'),，但结果仍然相同。也清除了缓存