0
我回來了，又做了一個學校項目。我試圖讓我的網站使用我在網上找到的一些自定義字體。這是我JSFiddle鏈接到我的代碼，我的HTML代碼如下：無法讓我的自定義字體顯示
<!doctype html>
<html>
<head>
<title>
| Bat-tection |
</title>
<meta charset="utf-8">
<link href="Styles/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="title">
Bat-Tection
</h1>
<h6 id="ctrtitle">
The only home protection service you will ever need!
</h6>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<aside>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
</aside>
<section class="text">
<article>
<h2>Article One Heading</h2>
<p>
Article One Content<img src="../Tuts/Images/pic07.jpg" alt="A Generic Image Caption Here" class="rgt">
</p>
<p>
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor. Curabitur posuere vulputate egestas. Vestibulum a leo id sapien commodo aliquam commodo quis dui. Phasellus at leo id elit dignissim egestas a eu elit. Quisque bibendum tellus at placerat luctus. Nulla blandit erat ipsum, eu molestie purus sollicitudin sit amet. Sed vehicula tortor quis libero finibus fringilla. Nam nibh mauris, lacinia a suscipit et, fringilla non lorem. Vestibulum tempor vel ligula ut interdum. Donec convallis porttitor est sit amet porttitor. Sed ullamcorper mauris nibh, id fermentum velit iaculis quis. Etiam rutrum blandit hendrerit. Proin a laoreet purus.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
<p class="spec"></p>
<article class="cols">
<h2 class="cols-span">Lorem ipsum dolor sit</h2>
<p class="lead cols-span">
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
</section>
<aside class="ads">
<p>
Advertisment can run the size out to the margin of the previous container element, no more!
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
</aside>
<footer>
<p>
Copyright © 2016 All Right Reserved
</p>
</footer>
</div>
</body>
</html>
我的CSS代碼如下：
@charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
@font-face {
font-family: battext;
src: url(../Fonts/batmfa.eot), /* IE9 Compat Modes */
src: url(../Fonts/batmfa.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
url(../Fonts/batmfa.woff2) format(woff2), /* Super Modern Browsers */
url(../Fonts/batmfa.woff) format(woff), /* Pretty Modern Browsers */
url(../Fonts/batmfa.ttf) format(truetype), /* Safari, Android, iOS */
url(../Fonts/batmfa.svg#svgFontName) format(svg); /* Legacy iOS */
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: left;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 20px;
}
article p{
text-indent: 2em;
padding-left: 1.5em;
}
body{
font-family: "battext";
color: #FFFD5D;
background-color: #252122;
font: 100% Verdana;
}
#ctrtitle{
text-align: center;
}
.cols{
/*-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-colum-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span{
-webkit-coloumn-span: all;
-moz-column-span: all;
column-span: all;
font-size: 1.2em;
margin-bottom: 0.2em;
line-height: 1.2em;
}
.cols p{
margin-bottom:1.1em;
text-align: justify;
}
footer{
clear: both;
background-color: #29292C;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
header{
background-color: #29292C;
padding-bottom: 1em;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0 0 1em 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav ul{
text-align: center;
margin: 1em;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;
nav ul li a{
background-image: url(../Images/bat-button1.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
outline: 0;
}
nav ul li a:hover{
background-image: url(../Images/bat-button2.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
nav ul li ul{
display: none;
}
p{
margin-bottom: 1.2em;
}
.rgt{
float: right;
max-width: 30%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.spec{
margin: -5px 0 10px 0;
border-bottom: 1px dashed #000000;
line-height: 0;
}
.text{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#title{
color: #FFFD5D;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
你可以關閉的傢伙我任何幫助嗎？
感謝， -dark_nemesis