Question

我正在使用Meteor框架，并在我的main.scss文件中包含以下内容：

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

h1 {
    font-family: 'GrandHotel-Regular';
}

这不起作用，当我检查所选字体时，系列GrandHotel-Regular就像它应该的那样，但是控制台说它的呈现为Times New Roman。

我在Ubuntu上使用Chrome，而且它是旧版本，因为我的笔记本电脑已经老了，所以无法再更新旧版本，但我不认为这会导致问题，因为这样的事情过去对我有用。

可能出现什么问题？

其他问题，例如： Font coming out as Times New Roman in Older Browsers

或者这个： Font proxima_novalight is rendered as Times New Roman

没有解决同样的问题。

Answer 1

您的字体的url s没有任何文件夹作为文件路径的一部分，这意味着它们必须与CSS文件位于同一文件夹中。他们真的吗？（如果没有，请添加文件夹/文件路径）

Answer 2

您的项目是如何设置的？检查开发人员工具中的网络选项卡，确保实际加载了字体。如果没有，请重新检查您的网址，确保他们指向正确的文件。

您的代码看起来完全正常，因此如果您的项目设置不是问题，请尝试使用其他浏览器，看看是否可以重现该问题。

@ font-face渲染为Times New Roman

2 个答案: