时间戳

首页 > 解决方案 > @Font-Face 声明中的不同权重和样式未按预期运行

html - @Font-Face 声明中的不同权重和样式未按预期运行

问题描述

在这一点上，我已经对@font-face 的使用进行了相当多的研究，并且熟悉其中的一些挑战，但仍然决定我想将它用于我的应用程序。但是，由于某种我完全不知道的原因，浏览器没有加载预期的字体。

我有一个带有如下声明的 CSS 文件：请注意，“！important”是我搞砸的东西，它似乎没有任何效果。

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
    font-weight: bolder;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

.cerberus-body {
    margin: 0;
    font-weight: normal !important;
    font-family: roboto;
}

这是我的网络结构的屏幕截图：

网页目录截图

正如您从屏幕截图中看到的那样，字体声明上的 src 路径与我的目录中的内容相匹配，并且我已经验证它们可以从我部署的站点访问。

我的页面的正文元素具有以下内容：

<body class="cerberus-body"></body>

我已经在开发控制台中验证了样式和声明按预期工作。

鉴于所有这些 - 这是我在加载页面时在开发控制台的网络选项卡中看到的内容：（它仅显示 Roboto-Black 和 Roboto-Bold 正在加载）

网络选项卡屏幕截图

当我检查页面上的元素时，我看到样式部分显示了 Roboto Black 的渲染字体：

渲染字体截图

检查页面上的 Body，我看到我的样式如我所愿地反映，并且 css 类得到了尊重：

CSS 检查屏幕截图

在这一点上，我真的很茫然。我可以使用任何帮助或指导来解决下一个问题。我正处于我认为我可能会放弃自定义字体的地步，但这是挽救我尊严的最后尝试。

鉴于字体似乎根本没有通过网络选项卡加载，我必须错过渲染引擎如何确定延迟加载的字体。除此之外，我很茫然。

更新

在阅读了 Pete 评论中提供的另一个问题后，我读到一些评论者建议更改定义字体规则的顺序。我翻转了规则的顺序，果然，字体按预期呈现。

不过，我不愿结束这个问题，因为我不知道为什么会这样，并且想了解底层的实现。

为了后代——我的新宣言

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
    font-weight: bolder;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "roboto";
    src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
    font-weight: normal;
    font-style: normal;
}

标签： htmlcssfontsfont-face

解决方案

推荐阅读