Question

我的字体在这里出了什么问题？我无法弄明白，显然这还不够长

@media not print{}
body {color: #635959; font-family: news_cycle; }

header { background-color: #242323;
color: #EFEFEF;
font-family: contail_one;
}
 article h3, h4 {color: #8C1018; }

 article a {color: #314052;}
 }

 header h1 {font-size: 4em;}

 figure > figcaption {font-size: 0.75em; font-style: italic;}

 main figure > figcaption ::before { content: pictured above; font-weight: bold; } 

 article > time {float: right; font-size: 0.75em; font-weight: lighter; }

@media not print {
    main > h3 {
        font-size: 2em;
    }
}

 header {padding: 20px 50px;}

 main padding: {5px 10px;}

 @font-face { font-family: news_cycle; src: url('../css/news_cycle.ttf') format('truetype')}
 @font-face {font-family: contail_one; src: url('../css/contail_one.ttf') format('truetype')}

 article {margin: 5px 0px; padding: 5px 5px; box-shadow: 1px 1px 6px #888888}

 media print {
   header {padding: 0px;}
   article {box-shadow: none;}
   header h1 {font-size: 2em;}
   header h2 {display: none;}
 }

<!doctype html>
 <html lang="en-us">

 <head>
    <title> Contoso News </title>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
 </head>

 <body>
 	<header>
        <h1> Contoso news </h1>
        <h2> on time, on topic </h2>
    </header>
 <main>
    <h3> Latest Articles </h3>

    <article>
        <time datetime="16-01-2016">`Friday, Jan 16 </time>
        <h4>International Story</h4>
        <p>Curabitur pharetra luctus augue, non posuere orci tristique vel. Sed posuere nisi nec lacus ullamcorper, ac vulputate nisl consequat. Nullam sollicitudin nulla vel felis faucibus aliquam. Nunc sit amet velit orci. Proin sed orci fringilla, elementum felis condimentum, convallis augue. Aliquam erat volutpat. Mauris tempus nunc sit amet aliquet bibendum. Praesent vestibulum cursus ex, quis laoreet eros consectetur ac. Ut congue libero quis mauris egestas feugiat. Sed pharetra lorem et magna fringilla, a volutpat nibh sollicitudin. Nullam sagittis sollicitudin urna, sed sollicitudin mauris ornare id. <a href="#" target="_blank"> read more... </a></p>
    </article>

     <article>
         <time datetime="14-01-2016">`wednesday, Jan 14 </time>
        <h4>Finance Story</h4>
        <p>Nullam tempor mi at libero elementum varius. Sed lobortis lacus feugiat est tristique, nec imperdiet turpis scelerisque. Ut sed urna malesuada, scelerisque dui sit amet, tempus mauris. Integer bibendum egestas urna, a bibendum sem gravida quis. Cras accumsan rhoncus vestibulum. Nam eu blandit leo. Integer at consectetur nunc, et tempus urna. Integer sit amet sollicitudin elit. Donec nec posuere erat. Sed vestibulum nisl neque, vitae tincidunt ex molestie quis. Nulla fringilla viverra turpis in volutpat. Cras vel orci quis velit efficitur ullamcorper sed eu ex. Nullam vel ex nec lectus imperdiet luctus vitae vel nibh.
        </p>
        <figure>
            <img src="../images/img.jpg" alt="debit card">
            <figcaption> New Debit Cards with Chip-Based Security. </figcaption>
        </figure> 
        <p> Donec eleifend velit eros, eu efficitur justo molestie id. In egestas gravida lectus. Ut ipsum odio, suscipit sit amet molestie non, scelerisque sed mi. Aenean sed augue eu arcu faucibus molestie. Sed eget ante gravida, rhoncus velit eu, tempus quam. Sed fermentum at odio sed commodo. Fusce lobortis cursus purus, quis consequat est faucibus at. Etiam massa felis, sodales at sodales sed, iaculis quis arcu. <a href+"#" target="_blank"> read more... </a></p>

    </article>

    <article>
        <time datetime="14-01-2016">`wednesday, Jan 14 </time>
        <h4>Technology Story</h4>
        <p>Morbi eget justo ut velit dapibus malesuada. Nunc elementum, neque quis convallis tempus, lacus ante tristique est, id porta tortor leo eget orci. Suspendisse hendrerit interdum lacus et condimentum. Mauris at ex dignissim, bibendum libero at, fermentum lectus. Maecenas porttitor purus quis augue interdum, eget malesuada neque placerat. Ut hendrerit risus in nibh elementum, quis vestibulum ipsum vulputate. Nulla facilisi. In consectetur et lacus vel tincidunt. Quisque feugiat ipsum et erat rhoncus efficitur. In in augue at enim tempor sollicitudin.<a href+"#" target="_blank"> read more... </a></p>

    </article>
 </main>

 <h4> sign up for our emails </h4>
 <summary>
     <form>
        <label> e-mail address: </label>
        <input type="text" id="label1" name="email" required>
        <label for="label2">   Delivery Preference: </label>
         <select>
            <option value="daily"> daily </option>
            <option value="weekly"> weekly </option>
            <option value="monthy"> monthly </option>
        </select>
        <input type="submit" value="sign-up">   
 </summary>


 </body>

 </html>

字体表面不能正常工作

0 个答案: