谷歌浏览器无法加载两个CSS文件

Question

谷歌浏览器无法加载两个CSS文件

htmlcssgoogle-chromerenderinggoogle-chrome-devtools

3

我刚开始为自己创建个人网站，但遇到了一个问题。只要我包含两个样式表，第二个样式表就无法加载（无法呈现）。我的第一个样式表可以正常加载（呈现），如下所示：

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

当我查看开发者工具中的“资源”面板时，它显示了两个样式表，但当我查看“源”面板时，只显示其中一个已加载：

“源”

资源

我尝试了所有在这里和这里提到的方法。

更新

这里是网络和控制台面板。

更新 2

更新 3

- Jacques Marais

这些样式表有任何 @import 吗？ - Peyman Mohamadpour

请使用审核选项卡审核当前状态，并让我看到结果。 - Peyman Mohamadpour

您可以使用Chrome Inspector调试网页加载体验。在打开时，按下Ctrl + P以启动调试器。 - Peyman Mohamadpour

请将您的页面上传到某个地方并提供链接。 - Peyman Mohamadpour

顺便提一下，您可能想查找CSS的::first-letter伪元素。 - Mr Lister

显示剩余8条评论

2个回答

-1

我不确定这个方法是否真的有效。我曾经遇到过相同的问题并找到了解决方案。在第二个样式表中，可以像这样做 -

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

- Sajeeb Ahamed

不行，不起作用。谢谢你的建议。 - Jacques Marais

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gianca · Accepted Answer

试试这个：

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

我刚刚删除了您链接标签内的标题属性，它可以正常工作。（我已在我的web服务器上测试过）

在<link>标签中没有标题属性。 http://www.w3schools.com/tags/tag_link.asp 哦，不要紧，它支持全局属性（包括标题），但是如果你删除它们，页面也能工作……我还注意到，如果您保留标题属性，但是不在其中添加空格，它也会起作用。尝试更改您的标题并删除所有空格。