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 /路径末尾都有查询字符串，这是消毒剂拒绝字体的原因。