所以我试图建立一个网站，但我遇到了一个问题。我的部分CSS工作，但很多都没有。例如我的字体不起作用。我已将Open Sans链接为Google字体，然后我制作了辅助字体Arial，但两者都不起作用，它只显示浏览器的默认字体。我试图以不同的方式诊断它，但没有任何作用。甚至我的专业网络开发朋友也不知道如何帮助我。
这是我的代码：
#page {
/* background-color: #1C6FB2; */
background-color: #FEFEFE;
}
#content {
background-color: #FEFEFE;
margin: 5%;
margin-top: 0%;
margin-bottom: 1%;
padding: 10%;
padding-top: 2.5%;
padding-bottom: 2.5%;
}
#header {
background-color: #FFFFFF;
margin-left: 10%;
margin-right: 5%;
margin-bottom: 0%;
margin-top: 2.5%;
padding-bottom: 1%;
padding-top: 1%;
padding-left: 5%;
h1 {
color: #FF0000;
font-family: 'Vollkorn', serif;
font-weight: 800;
font-size: 21px;
text-align: left;
}
p {
/*color: #0F0F0F;*/
color: #FF0000;
font-family: 'Open Sans', 'Arial', sans-serif;
font-weight: 300;
text-align: left;
font-size: 12pt;
}
p1 {
color: #0F0F0F;
font-family: 'Open Sans', 'Arial', sans-serif;
font-weight: 600;
text-align: left;
font-size: 14pt;
}
#tabbar {
display: none;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Home</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="page">
<div id="header">
<h1>loremdesign</h1>
</div>
<div id="content">
<div id="left">
<div id="text">
<p1>Lorem ipsum dolor sit amet, <br></p1> <p>Consectetur adipiscing elit. Integer eget arcu tortor. Integer vitae lacus et turpis tincidunt pulvinar. Nam aliquam semper faucibus. Vestibulum a molestie justo, id facilisis nisi. Donec ultricies velit vitae nisi tempus efficitur. Nullam lacus massa, tincidunt ultricies dictum ut, luctus ac mi. Maecenas eget arcu mollis, aliquet arcu non, faucibus leo. Morbi tempor in nulla a scelerisque. Donec euismod, nunc a rhoncus tristique, augue quam vulputate neque, sit amet tempor magna lorem sit amet massa. Mauris eleifend feugiat enim sed bibendum. Quisque at leo nunc. Proin accumsan aliquam urna, nec pulvinar magna suscipit non. In vulputate convallis mi, vitae posuere leo placerat nec. Morbi ornare, dui quis tempus elementum, erat libero- pretium mi, posuere sollicitudin risus leo nec metus. Maecenas tempus, lectus nec sollicitudin vehicula, sapien massa lacinia felis, nec ultrices nisl diam vel lorem.<br /><br />
<br /></p>
<p>Vivamus ornare nulla ac sem suscipit finibus. Aenean accumsan vulputate turpis, sit amet dapibus ligula tincidunt quis. Ut mauris mi, eleifend nec sollicitudin vitae, maximus sed magna. Curabitur eleifend velit orci, sed eleifend leo dictum in. Nunc suscipit sem eget justo dapibus euismod. Etiam egestas iaculis orci et porttitor. Etiam vehicula, purus sit amet ornare aliquam, diam massa scelerisque neque, in faucibus augue eros quis sapien. Praesent nisi justo, sodales vel efficitur id, aliquam sit amet lacus. Cras lacinia, lacus sed lacinia scelerisque, turpis odio venenatis risus, eget ornare justo magna quis odio. In consectetur ex in venenatis convallis. Aenean at lacus non risus gravida dictum. Sed velit est, ullamcorper eu purus vel, vestibulum pulvinar magna. Donec vitae imperdiet tellus. Nullam dolor magna, blandit ut eros vel, vestibulum tempus lorem.<br /><br />
<br /></p>
<p>Ut eget eros sit amet leo rhoncus auctor. Phasellus eu eleifend nisi, vel auctor diam. Nullam quis augue in augue mollis porttitor nec at tellus. In hac habitasse platea dictumst. Mauris vel sem id leo ultrices volutpat. Quisque at nulla commodo, viverra dolor sed, tincidunt leo. Suspendisse eget iaculis massa. Mauris vitae orci eu arcu consectetur ultricies. Nullam sit amet ullamcorper mauris, eget blandit ex. Morbi porttitor eros et leo facilisis sagittis. Maecenas nec ex velit. Quisque ultricies leo finibus mauris dignissim, et dapibus quam accumsan. Nulla et lobortis leo. Sed quis felis ut metus aliquet vulputate. Nam fringilla nulla ac augue ullamcorper, at imperdiet ipsum cursus.<br /><br />
<br /></p>
<p>Aenean ut lacus a eros imperdiet egestas sit amet tincidunt velit. Nunc id turpis odio. Pellentesque vitae leo velit. Nulla ut feugiat mi. Aliquam sollicitudin, dolor non eleifend vehicula, tellus magna suscipit nulla, id egestas nisl elit a urna. Sed vitae porta orci. Sed mollis faucibus ex, vitae tristique elit vestibulum eu. Sed condimentum risus et dignissim feugiat. Phasellus imperdiet aliquam sapien, vel accumsan massa sodales non.<br /><br />
<br /></p>
<p>Pellentesque sit amet arcu sit amet neque tempor elementum eu nec sem. Nam euismod, eros at fermentum tincidunt, lectus orci tempor diam, dictum iaculis augue erat malesuada ante. In sollicitudin accumsan magna nec viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae cursus diam, a iaculis lorem. Morbi malesuada ex in lacus placerat aliquam. Aliquam nec sollicitudin metus. Etiam ut dolor at sem condimentum rhoncus. Sed ultricies dui vitae condimentum volutpat. Cras sodales felis vitae felis ultrices convallis. Nunc in ligula eu augue mollis ullamcorper id vitae odio. Quisque sit amet elit sed nisi finibus ullamcorper at sed dolor. Phasellus eget imperdiet risus.<br /><br />
<br /></p>
<p>Nulla euismod sollicitudin tincidunt. Suspendisse ac risus ac erat semper egestas semper id risus. Aliquam sed augue mauris. Morbi in massa arcu. Integer interdum nibh justo, in posuere tortor vulputate a. Quisque eu lacus suscipit risus semper dignissim. Vivamus molestie metus nec ante pharetra porta. Suspendisse sed orci sed est dignissim dictum sed id est. Nullam et tempor magna. Donec aliquam nibh sit amet suscipit egestas. Aenean vitae mattis eros, nec blandit dui. Pellentesque vulputate, elit a imperdiet accumsan, odio sem dapibus mauris, nec sodales ligula mauris in augue. Aliquam et iaculis mauris. In a nulla a dolor tincidunt semper at eget quam.<br /><br />
<br /></p>
<p>Quisque neque nulla, volutpat non finibus sit amet, auctor gravida sapien. Maecenas ornare in arcu eu semper. Nullam at elit lacinia, consequat erat id, malesuada sapien. Suspendisse rhoncus lacus ut libero ullamcorper, non semper orci vulputate. Aenean commodo sagittis mi nec laoreet. Vivamus ultrices auctor sapien vel lobortis. Fusce dolor mauris, ullamcorper eu scelerisque vitae, vulputate et dui. Aliquam dui sapien, aliquet id feugiat eu, condimentum id nisl. Nunc ultrices laoreet mi. Mauris nulla felis, vehicula eget risus nec, consequat tempor magna.<br /><br />
<br /></p>
<p>Praesent vel libero vel nunc ullamcorper cursus id vitae ipsum. Nam faucibus, risus sed pretium volutpat, nisl dui placerat urna, in blandit metus sapien et velit. Cras fringilla est ut tincidunt dapibus. Sed dignissim erat ut ex dapibus tempor. Sed consequat sit amet justo nec cursus. Maecenas tempus eget libero non pellentesque. Mauris eleifend pellentesque dictum. Nulla gravida tincidunt facilisis. Sed dapibus erat at metus cursus lobortis. Vivamus sit amet eros orci. Morbi et sem eget risus laoreet auctor vel eu dolor. Sed nec massa risus. Mauris quis lorem aliquet, dignissim lectus at, dapibus metus. Etiam dictum massa magna, at auctor ante mattis vitae. Quisque finibus lorem eu enim dictum mattis.<br /><br />
<br /></p>
<p>Maecenas dignissim massa ac pulvinar convallis. Morbi non suscipit lorem. Mauris non aliquam orci. Integer nulla eros, rhoncus quis ante et, iaculis congue massa. In efficitur gravida pellentesque. Vivamus lorem mi, mollis a dignissim et, vehicula id ligula. Cras porttitor porta vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pretium in eros quis tempus. Fusce pharetra varius dignissim. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br /><br />
<br /></p>
<p>Cras sed arcu ut lorem consectetur convallis eu id turpis. Integer id dignissim erat. Donec quis vehicula mi. Sed blandit eu risus in aliquet. Vestibulum facilisis eget lacus pulvinar gravida. Sed fringilla aliquet maximus. Mauris volutpat sollicitudin erat, non feugiat enim rhoncus sit amet. Praesent sed nibh fermentum, commodo metus sed, tincidunt felis.</p>
</div>
</div>
<div id="right">
</div>
</div>
</div>
<div id="tabbar" class="show-for-small-only">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
正如您所看到的，我的所有字体都设置为鲜红色（用于调试目的）和sans-serif，但在Chrome中它们显示为黑色衬线字体，这不是我设计的方式。 但有些事情是有效的，比如我将#content的背景颜色设置为红色就可以了，但只是文字根本不起作用。 有人能帮帮我吗？ 谢谢， 杰里米
答案 0 :(得分：5)
#header遗失}
#header {
background-color: #FFFFFF;
margin-left: 10%;
margin-right: 5%;
margin-bottom: 0%;
margin-top: 2.5%;
padding-bottom: 1%;
padding-top: 1%;
padding-left: 5%;
应该是
#header {
background-color: #FFFFFF;
margin-left: 10%;
margin-right: 5%;
margin-bottom: 0%;
margin-top: 2.5%;
padding-bottom: 1%;
padding-top: 1%;
padding-left: 5%;
}
答案 1 :(得分：0)
你可以在样式前放一个这样的点并检查吗？像这样：
.h1 {
color: #FF0000;
font-family: 'Vollkorn', serif;
font-weight: 800;
font-size: 21px;
text-align: left;
}
答案 2 :(得分：0)
制作p1 div - 如：
在html中更改：
<p1>Lorem ipsum dolor sit amet, <br></p1>
到
<div class="p1"> Lorem ipsum >Lorem ipsum dolor sit amet, <br></div>
应该成为.p1