Question

我正在做一些简单的编码，我的网站字体突然改变了。我从未设置过font-family，因此字体是默认的serif。然后它变成了等宽字体。最奇怪的是，先前编码的文本保持相同的衬线字体。我不知道它可能是什么。我也为糟糕的设计道歉，它是一个WIP。这是一个截图：

如您所见，底部和左侧文本都在等宽字体中，但右侧不是很有效

CSS：

    html,body               {
                            width: 100%;
                            height: 100%;
                            font-family: serif;

    }


    body                {
                            background-color: #00adc4;
    } 


    .center             {
                            text-align: center;
    }

/* Home */

    /* Logo */

        img.logo            {
                                width: 8%;
                                height: auto;
                                float: left;
        }

    /* Logo */
    /*Navigation Bar */

        nav                 {
                                background-color: turquoise;
                                border-radius: 10px;
                                width: 80%;
                                display: block;
                                margin: 0px auto;
        }

        nav a               {
                                text-decoration: none;
                                color: teal;
                                font-size: 60%;
                                text-shadow: 0.5px -0.5px;
                                display: inline;
                                margin: 2%;
                                text-align: center;
        }

        nav a:visited       {
                                color: teal;
        }


    /*Navigation Bar */

    /* Header */

        h1.header           {
                                text-align: center;
                                font-size: 150%;
        }
    /* Header */

    /* Main Content */


        .main               {
                                border: 1px solid black;
                                border-radius: 5px;
                                background-color: #00dddd;
                                width: 40%;
                                float: right;
                                max-height: 40% !important;
                                overflow-y: auto;
                                margin: 2%;
                                padding: 1%;
        }


    /* Main Content */

    /* Sidebars */


        aside.aside1                {
                                height: 20%;
                                width: 40%;
                                margin: 2%;
                                padding: 1%;
                                /* background-color: teal; */
                                /* border: 1px solid black; */
                                float: left;
                                border-radius: 5px;
        }


        h3.specials         {
                                margin: 0%;
                                text-align: center;
        }

        /* Sidebar Images */

        img.thumbnail_1     {
                                width: 30%;
                                height: auto; 
                                margin: 0% 2%;
        }

        img.thumbnail_2     {
                                width: 20%;
                                height: auto;
                                margin: 0% 2%;
        }

        img.thumbnail_3     {
                                width: 27%;
                                height: auto;
                                margin: 0% 2%;
        }
        /* Sidebar Images */


    /* Sidebars */

    /* Mailing List */
        div.coupon          {

                                height: 20%;
                                width: 40%;
                                background-color: teal;
                                border-radius: 3px;
                                -webkit-animation: animation 2s;
                                animation: animation 2s;
                                margin-left: 3%;
        }

    /* Mailing Liist */

    /* Multimedia */

        audio.contest           {
                                    width: 100%;
        }

    /* Multimedia */

/* Home */

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Special Deals - The Jumpin' Juice Company</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="finalmobile.css">
        <link rel="stylesheet" media="only screen and ( min-width: 30em )" href="finaltablet.css">
        <link rel="stylesheet" media="only screen and ( min-width: 48em )" href="final.css">
        <script type="text/javascript" src="project.js"></script>
    </head>
    <body>
        <img src="images/logo.jpg" alt="Logo" title="Jumpin' Juice" class="logo">
        <header>
            <h1 class="header">The Jumpin' Juice Company</h1>
        </header>
        <hr>
        <nav>
            <a href="index.html">Home</a>
            <a href="contact.html">Contact Us</a>
            <a href="faq.html">FAQ</a>
            <a href="signup.html">Coupons</a>
            <a href="specials.html">Specials</a>
            <a href="locations.html">Locations</a>
        </nav>
        <hr>    
        <section class="main">
            <h3 class="news">News</h3>
            <h4 style="color: grey;"><b>Annual Audio Contest</b></h4>
            <p style="font-size: small; color: black;">This contest is a chance for you to win a year's supply of juice, all on us. Submit the best music relating to juice to win!</p>
            <h5>Last Year's Winner:</h5>
            <audio class="contest" controls>
                <source src="multimedia/AmTronic_-_Caribbean_Dub.mp3">
                <source src="multimedia/AmTronic_-_Caribbean_Dub.ogg">
                Your browser doesn't support .mp3 or .ogg extensions
            </audio>
            <p style="font-size: small; color: red;">The deadline for entries has been reached<code></p>
        </section>
        <aside class="aside1">
            <h3 class="specials">Specials!</h3>
            <a href="specials/orangejuice.html" target="_blank"><img class="thumbnail_1" src="images/juices/orange_juice.jpg" alt="orange juice" title="Orange Juice"></a>
            <a href="specials/cranberryjuicetea.html" target="_blank"><img class="thumbnail_2" src="images/juices/cranberry_juice_tea.jpg" alt="cranberry juice tea" title="Cranberry Juice Tea"></a>
            <a href="specials/berry_madness.html" target="_blank"><img class="thumbnail_3" src="images/juices/berrymadness.jpg" alt="berry madness" title="Berry Madness"></a>
            <p style="font-size: 50%; display: inline;">Orange Juice</p>
            <p style="font-size: 40%; display: inline;">Cranberry Juice Tea</p>
            <p style="font-size: 50%; display: inline;">Berry Madness</p>
        </aside>
        <br><br><br><br><br><br>
        <div class="coupon">
            <p class="animation">Check out this</p>
        </div>
        <br><br><br>
        <footer>
            <p style="font-size: small; text-align: center;">&#169; Jumpin' Juice Company, 2017</p>
        </footer>
    </body>
</html>

Answer 1

您只使用serif作为默认字体系列。最好使用常用的字体组合。

对于衬线字体：

font-family: "Times New Roman", Times, serif;

对于sans-serif字体：

font-family: Arial, Helvetica, sans-serif;

此处有更多详情：https://www.w3schools.com/cssref/css_websafe_fonts.asp

您也可以使用Google网络字体。

以下是Roboto Font的一个例子：

在您的HTML文件中：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

在CSS文件中：

font-family: 'Roboto', sans-serif;

有关如何使用Google网络字体的详细信息： https://developers.google.com/fonts/docs/getting_started

为什么我的字体会突然改变？

1 个答案: