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和here的方法。

更新

以下是Network和Console窗格。

更新2

更新3

Answer 1

试试这个：

<!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>

我刚刚删除了链接标记中的title属性，但它确实有效。（我已经在我的网络服务器上测试了它）

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

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

操作，没关系，它支持全局属性（包含标题），无论如何，如果你删除它们，页面可以工作......我注意到它也有用，如果你留下标题属性但是里面没有空格。尝试更改标题并删除所有空格。

Answer 2

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

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

Google Chrome不会加载两个CSS文件

2 个答案: