Question

在Mozilla Firefox中，不会从CSS加载Helvetica和BebasNeue字体的本地副本，但在Safari / Chrome中会加载。

我有ttf，eot，woff和woff2格式的Helvetica本地副本，并创建了css @ font-face，如下面的代码所示。我对BebasNeue Regular进行了同样的操作，但目前只有ttf。

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

@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue\ Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
};

我的Chrome浏览器和野生动物园检查器中的“网络”标签显示它正在加载Helvetica.woff2和BabasNeue，但Firefox却没有加载任何这些。我拥有最新的浏览器版本，并且正在MacOS Mojave上运行。

可能是什么问题？我如何确定项目字体文件将跨所有浏览器而不是本地计算机的字体加载？

Firefox中没有出现错误消息，但“网络”选项卡为空。另外，BebasNeue字体在Safari中还有多余的字母间距，但我怀疑这与该字体缺少truetype或woff格式类型有关。

自定义字体文件无法加载到Firefox CSS中，但可以加载到Chrome / Safari中

0 个答案: