Question

我正在使用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净值：: ERR_FAILED （index）：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净值：: ERR_FAILED

Answer 1

我认为您需要将字体转换为woff2才能正常工作，显然chrome可能会出现格式不同的问题/

Answer 2

工作正常，我在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;
}

chrome中未显示woocommerce的星级评分

2 个答案: