Google Chrome 不会加载两个 CSS 文件

Question

我刚刚开始为我创建个人网站，然后遇到了一个问题。一旦我包含两个样式表，第二个样式表就不会加载（不会呈现）。我的 加载（渲染）的第一个样式表 如下所示：

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

未加载（未呈现）的第二个样式表如下所示：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background: #333333;
}

h1 {
    margin: 0;
    font-family: archive;
}

我的HTML看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Jacques Marais</title>

        <link rel="stylesheet" href="fonts/archive.css" title="Archive Font CSS" />
        <link rel="stylesheet" href="css/master.css" title="Master CSS" />
    </head>
    <body>
        <h1><span class="first-character">J</span>acques Marais</h1>
    </body>
</html>

当我查看开发人员工具中的 Resources 面板时，它显示了两个样式表，但是当我查看 Sources 面板时，它只显示一个已加载：

来源

资源

我尝试了所有提到的方法 here and here。

更新

这是 Network 和 Console 窗格。

更新 2

更新 3

Answer 1

我不确定它是否真的有效。我遇到了同样的问题并找到了解决方案。在第二个样式表中这样做 -

h1 {
    margin: 0;
    font-family: 'archive'; /* add your font-family name inside '' */ 
}

Answer 2

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Jacques Marais</title>

        <link rel="stylesheet" href="fonts/archive.css" />
        <link rel="stylesheet" href="css/master.css" />
    </head>
    <body>
        <h1><span class="first-character">J</span>acques Marais</h1>
    </body>
</html>

我刚刚删除了您的 link 标签中的 title 属性并且它有效。（我已经在我的网络服务器上测试过了）

<link> 标签内没有标题属性。

http://www.w3schools.com/tags/tag_link.asp

Ops，没关系，它支持全局属性（包括标题），无论如何，如果你删除它们，页面就会工作......我注意到如果你离开它也会工作title 属性，但其中没有空格。尝试更改标题并删除所有空格。

Google Chrome 不会加载两个 CSS 文件

Google Chrome won't load two CSS files

html

css

rendering

google-chrome

google-chrome-devtools