CSS字体系列在Firefox中不起作用

Question

嘿，我在 scss 文件中有以下代码：

@font-face {
    font-family: 'tr-icon';
    src:url('../fonts/tr-icon.eot?88d087');
    src:url('../fonts/tr-icon.eot?#iefix88d087') format('embedded-opentype') ,
        url('../fonts/tr-icon.ttf?88d087') format('truetype') ,
        url('../fonts/tr-icon.woff?88d087') format('woff') ,
        url('../fonts/tr-icon.svg?88d087#trends') format('svg') ;
    font-weight: normal;
    font-style: normal;
}
[class^="tr-icon-"], [class*=" tr-icon-"] {
    font-family: 'tr-icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

它被 Firefox 拒绝并出现以下错误：

downloadable font: rejected by sanitizer (font-family: "tr-icon" style:normal weight:normal stretch:normal src index:0)

我就是无法让它工作。我尝试了不同的解决方法，如 https://jamie.curle.io/posts/firefox-font-rejected-by-sanitzer/ 或 https://github.com/Semantic-Org/Semantic-UI/issues/2121，但似乎没有任何效果......还有其他想法吗？

Answer 1

你试过了吗？

删除了每行末尾的查询字符串？

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

由于每个 url/路径末尾的查询字符串是您的字体被 sanitizer 拒绝的原因。