Css 自定义图标集未在Safari中显示

我使用FontForge创建了一些图标，这些图标在除Safari之外的所有现代浏览器中都可以使用。是什么导致Safari成为唯一不显示字体的浏览器

这是正在使用的SCS：

@font-face {
    font-family: 'MyFont';
    src: url('/assets/fonts/MyFont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.my-font-icon {
    font-family: 'MyFont';
    display: inline-block;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

    &:before {
        font-family: 'MyFont';
        display: inline-block;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }

    &.my-font-questions:before {
        content: "\0001";
    }
    &.my-font-chevron-left:before {
        content: "\0002";
    }
    &.my-font-close:before {
        content: "\0003";
    }
}

---

Safari需要TrueType/ttf字体版本，实际上您应该包括几种不同的字体，而不仅仅是woff2，后者是最现代的字体。以下是CSS技巧文章中的一个示例列表，浏览器会找到它理解的字体并呈现该字体：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

FontForge应该为您提供这些其他字体类型，但如果没有，则需要转到FontSquirrel进行渲染（如果您有许可证和权限）：

---

woff2在Safari中从v12得到完全支持？它应该得到支持，我们在v13中遇到了问题。我们尝试过使用您的上述解决方案，但没有成功。图标仍然没有显示。它显示为一个空白。@GetOffMyLawn您的字体文件在正确的位置吗？看起来FontForge有一个检查程序，您的字体通过了正确的检查吗@GetOffmyLawn是Safari中加载的字体，例如，该字体是否在网络选项卡中列为http 200响应？@Andersonola是，它正在加载

200

。