我刚开始为自己创建个人网站,但遇到了一个问题。只要我包含两个样式表,第二个样式表就无法加载(无法呈现)。我的第一个样式表可以正常加载(呈现),如下所示:
第二个未加载(未呈现)的样式表如下:
当我查看开发者工具中的“资源”面板时,它显示了两个样式表,但当我查看“源”面板时,只显示其中一个已加载:
“源”
@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
@import
吗? - Peyman MohamadpourCtrl + P
以启动调试器。 - Peyman Mohamadpour::first-letter
伪元素。 - Mr Lister