无法显示我的自定义字体

时间：2016-07-08 23:04:14

标签： css font-face

我回来了，又做了另一个学校项目。我试图让我的网站使用我在网上找到的一些自定义字体。这是我的代码的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 &copy; 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

3 个答案:

答案 0 :(得分：1)

我从你的问题中理解的是，你想知道如何使用字体，不是吗？

您可以随时访问https://www.google.com/fonts，并且在每种字体下都有一个关于如何使用此字体的按钮。

答案 1 :(得分：0)

你只是缺少一行代码（我认为）它是
$mail = new PHPMailer(); $body = file_get_contents('contents.html'); $body = eregi_replace("[\]",'',$body); $mail->IsSMTP(); // telling the class to use SMTP $mail->Host = "mail.yourdomain.com"; // SMTP server $mail->SMTPDebug = 2; // enables SMTP debug information (for testing) // 1 = errors and messages // 2 = messages only $mail->SMTPAuth = true; // enable SMTP authentication $mail->Host = "mail.yourdomain.com"; // sets the SMTP server $mail->Port = 26; // set the SMTP port for the GMAIL server $mail->Username = "yourname@yourdomain"; // SMTP account username $mail->Password = "yourpassword"; // SMTP account password $mail->SetFrom('name@yourdomain.com', 'First Last'); $mail->AddReplyTo("name@yourdomain.com","First Last"); $mail->Subject = "PHPMailer Test Subject via smtp, basic with authentication"; $mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test $mail->MsgHTML($body); $address = "whoto@otherdomain.com"; $mail->AddAddress($address, "John Doe"); if(!$mail->Send()) { echo "Mailer Error: " . $mail->ErrorInfo; } else { echo "Message sent!"; }
如果你在 body 元素以及font-face下插入它。那么我认为它会起作用。希望这会有所帮助...

答案 2 :(得分：0)

从css中取出引文

font-family: "battext"

注意事项，检查以确保您有权在您正在进行的任何事情中使用

还要检查以确保文件路径正确。

如果你的结构是这样的:(大写=文件夹）

  • HTML
    • 的index.html
  • CSS
    • styles.css的
  • FONT
    • myfont.ttf

然后..这些应该是你的代码

html: <link type="text/css" rel="stylesheet" href="../css/styles.css" />

起飞＆＃34; ../"如果index.html与CSS / FONT文件夹的级别相同

css:   @font-face {  font-family: myfont;  src: url(../font/myfont.ttf); }

css的src将从它所在的文件夹中开始，所以styles.css必须返回一个目录，然后转到字体和你的文件

相关问题
最新问题