chrome中未显示woocommerce的星级 [英] star rating for woocommerce not showing on chrome

问题描述

我正在使用wordpress woocommerce，并且此文件woocommerce/assets/css/_fonts.scss中包含以下代码.

I'm using wordpress woocommerce, and is this file woocommerce/assets/css/_fonts.scss it has this code.

@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看起来像这样

the HTML looks like this

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

我也拥有所有字体文件.它在Firefox上可以正常工作，但在chrome上却显示出一些奇怪的字符?知道如何解决这个问题吗?

I have all the font files too. It works fine on Firefox, but on chrome is shows some weird chars? Any idea how to fix this?

此处的字体CSS

更新:

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

I noticed these errors on chrome

通过以下网址访问字体: https起源'https:MY_URL'的://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff '已被CORS政策阻止:允许访问控制"-Origin'标头包含多个值'*，'，但仅允许一个.(索引):571 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff net :: ERR_FAILED(索引):1在' https:中访问字体://来自起源"https:MY_URL"的//bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf "已被CORS政策阻止:"Access-Control-Allow-Origin'标头包含多个值'，*'，但只允许一个.(索引):657 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf net :: ERR_FAILED

Access to font at 'https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff' from origin 'https:MY_URL' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, ', but only one is allowed. (index):571 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff net::ERR_FAILED (index):1 Access to font at 'https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf' from origin 'https:MY_URL' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values ', *', but only one is allowed. (index):657 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf net::ERR_FAILED

推荐答案

好了，我在 stackpathcdn 上禁用了CORS标头，然后将woff转换为woff2并将css更改为此.

Got it work, i disabled CORS headers on stackpathcdn and I converted woff to woff2 and changed the css to this.

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

这篇关于chrome中未显示woocommerce的星级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！