@font-face 渲染为 Times New Roman答案

【问题标题】：@font-face rendering as Times New Roman@font-face 渲染为 Times New Roman
【发布时间】：2016-10-17 05:44:22
【问题描述】：

我正在使用 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

没有解决同样的问题。

【问题讨论】：

标签： css meteor fonts font-face webfonts

【解决方案1】：

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

【讨论】：

我很笨。哈。我不敢相信我没听懂。

【解决方案2】：

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

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

【讨论】：