@font-face 渲染为 Times New Roman

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 以确保它们指向正确的文件。

您的代码看起来完全没问题，所以如果您的项目设置不是问题，请尝试使用不同的浏览器，看看是否可以重现该问题。

Answer 2

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

@font-face 渲染为 Times New Roman

@font-face rendering as Times New Roman

css

fonts

webfonts

font-face

meteor