Question

在我的website中，我添加了字体（在我的CSS中）并尝试在我的网站中使用它们，但它们不会显示出来。我使用了三个修复程序：

FIX 1：

body {
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: fontfix;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix {
  from { opacity: 1; }
  to { opacity: 1; }
}

FIX 2：

$(‘body’)
    .delay(500)
        .queue(
        function(next){
    $(this).css(‘padding-right’, ‘1px’);
});

FIX 3：

jQuery.fn.redraw = function() {
    return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
    jQuery('body').redraw();
});

他们都没有效果，我的网站保持不变。它可能是Chrome，我的电脑，或者我可能错误地链接了网站，我不知道。任何帮助，将不胜感激。这是我的代码（我遗漏了我的JavaScript，因为它无关紧要）：

HTML

<main class="content" role="main">
    <section class="section two">Ut dui diam, vulputate a gravida non, ullamcorper ac leo. Aenean pellentesque feugiat quam ac facilisis. Sed aliquam justo vel augue tincidunt facilisis. Phasellus lacinia quis sem sed aliquam. Etiam ultrices in arcu vel elementum. Maecenas scelerisque leo nec elit convallis, sagittis tincidunt purus consectetur. Cras gravida fringilla sem, in lacinia diam interdum sit amet. Nunc viverra nunc vitae diam malesuada, eu sollicitudin erat feugiat. Sed sed dapibus dui. Nullam a convallis erat, quis malesuada mi. Nunc vel malesuada elit. Proin a finibus turpis. Nullam faucibus magna sed felis fermentum iaculis. Nam et faucibus odio, vel viverra purus. Fusce pellentesque tincidunt ante, vitae tempor purus pulvinar eget. Fusce luctus orci sit amet nisi tincidunt, ut ullamcorper quam posuere. Vivamus elit massa, aliquam sed lectus non, condimentum accumsan turpis. Duis purus nibh, suscipit in lectus quis, dapibus rutrum turpis. Phasellus tristique nulla non ipsum lacinia, quis mattis quam laoreet. Vivamus sagittis, ante id sodales rutrum, odio eros commodo risus, quis consectetur lacus nunc vitae neque. Donec mauris urna, fringilla et laoreet fermentum, porttitor at nibh. Donec lorem magna, vulputate a ligula ut, tempor sollicitudin erat. Curabitur lobortis fringilla diam, a sodales nibh placerat ac. Aenean id feugiat dolor. Suspendisse potenti. Donec sed sem eu felis ullamcorper laoreet. Nunc blandit ut nibh nec condimentum. Phasellus a tincidunt ipsum. Quisque blandit congue lacus vitae venenatis. Suspendisse sit amet lobortis velit. Duis rhoncus vehicula elementum. Cras in viverra nunc. Maecenas egestas molestie mauris at placerat. Suspendisse congue faucibus est et aliquam. Nam rutrum sapien et iaculis eleifend. Donec eu tincidunt urna, quis ultrices purus. Curabitur sagittis tempus risus nec congue. Donec a felis nec dui interdum condimentum et a tortor. Quisque eget diam vitae turpis tristique imperdiet nec eget est. Sed gravida nec orci ac feugiat. Nulla et erat neque. Integer sit amet velit ornare quam rutrum tincidunt. Ut sollicitudin, nisi at porttitor maximus, nisi dui volutpat massa, non dictum diam nisi id nisi. Sed pretium ligula vitae sollicitudin bibendum. Donec viverra lorem et lectus elementum, imperdiet tempor erat cursus. Aliquam id viverra purus. In hac habitasse platea dictumst. Phasellus vel libero ac sem mollis auctor eu vitae libero. Mauris sit amet metus condimentum, consectetur tellus eget, ullamcorper orci. Donec vel arcu eros. Pellentesque vitae nulla a nisi mattis malesuada ac in dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse rhoncus tempor purus eu gravida. Pellentesque sollicitudin, elit eu cursus finibus, quam est cursus justo, at iaculis orci neque quis elit. Aliquam auctor vel leo sit amet faucibus. Maecenas neque diam, pretium sit amet nisi non, eleifend tempus elit. Pellentesque pulvinar turpis elit, in tempus ex efficitur sed. Morbi ornare elementum enim. Donec venenatis pellentesque ante, laoreet pretium leo varius in. Aliquam eu sapien vitae nibh imperdiet consectetur. Nunc ultricies venenatis nisi quis sagittis. In hac habitasse platea dictumst. Aenean malesuada placerat neque id congue. Pellentesque sagittis euismod quam, vel convallis diam. Nunc scelerisque nibh nec congue finibus. Pellentesque non lacinia nibh, id accumsan eros. Aliquam feugiat fringilla sem. Vivamus porta metus in libero cursus, et ornare elit eleifend. Phasellus venenatis pellentesque venenatis. Nullam feugiat condimentum justo, et molestie sapien varius eget. Curabitur suscipit ex vel erat luctus, consectetur aliquet enim placerat. Vivamus id vehicula dolor, nec volutpat lectus. Integer lacinia, dolor et rhoncus blandit, sapien leo fringilla risus, nec maximus libero erat eget quam. Sed sit amet magna purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
    <section class="section three">
         <h2>Three</h2>

    </section>
    <section class="section four">
         <h2>Four</h2>

    </section>
</main> <a href="#0" class="cd-top">Top</a>

<!-- Footer -->
<footer class="fixed_footer">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
    </div>
</footer>
</body>

CSS

/* Fonts */
    @import url(http://fonts.googleapis.com/css?family=Teko:700);
    @import url(http://fonts.googleapis.com/css?family=Exo:400,900);
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,900italic,900,700italic,700,500italic,500,400italic);
    @import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
    @import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
    @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Body */

    * {
        margin: 0;
        padding: 0;
        font-family: "Roboto", sans-serif
    }

/* Header */

    /* Shrinking */

        /* ClearFix */

        .cf:before,
        .cf:after {
            content: " ";
            display: table; 
        }

        .cf:after {
            clear: both;
        }

        .cf {
            font-family: "Teko", sans-serif;
            top: 30px;
            *zoom: 1;
            width: 100%;
            height: 100px;
            background: #02236a;
            position: fixed;
            z-index: 9999;
            box-shadow: 0 4px 4px rgba(0,0,0,0.1);
        }

        /* Header Styles */

        .small {
            height: 80px;
        }

        .small .logo {
            width: 240px;
            height: 80px;
        }

        .nav {
            width: 80%;
        }

        .logo {
            float:left;
        }

        /* Transitions */

        header, .logo {
            -webkit-transition: all 1s;
                    transition: all 1s; 
        }

    /* Navigation */

        ul li {
            float: left;
            margin-left: 50px;
            padding-top: 45px;
            color: #fafafa;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }

        ul li:hover {
            color: #ffba00;
        }

        /* Social Icons */

        .sicf {
            z-index: 9999;
            position: fixed;
            height: 30px;
            width: 100%;
            background-color: #001f4c;
        }

            /* Icons */

            #social-icons li {
                float: left;
            }

            .facebook, .google, .twitter, .youtube {
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .facebook:hover {
                background-color: #3b5998;
            }

            .google:hover {
                background-color: #dd4b39;
            }

            .twitter:hover {
                background-color: #00aced;
            }

            .youtube:hover {
                background-color: #92291b;
            }

/* Main Content */

    *,
    *:before,
    *:after {
      box-sizing: border-box;
      font: 300 1em/1.5 'Merriweather', serif;
      color: #242424;
      padding: 0;
      margin: 0;
    }

    html,
    body {
      background: rgb(236, 240, 241);
    }

    .content {
      margin: auto;
      margin-bottom: 350px;
      /* Same height as footer */
    }

    /* Slider */

    .rslides {
        position: relative;
        list-style: none;
        overflow: hidden;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

    .rslides li:first-child {
        position: relative;
        display: block;
        float: left;
    }

    .rslides img {
        z-index: 10;
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }

    /* Top Button */

    .cd-top {
        display: inline-block;
        height: 40px;
        width: 40px;
        position: fixed;
        bottom: 40px;
        right: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        /* image replacement properties */
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
        background: #3d4942 url(../IMG/cd-top-arrow.svg) no-repeat center 50%;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity .3s 0s, visibility 0s .3s;
        -moz-transition: opacity .3s 0s, visibility 0s .3s;
        transition: opacity .3s 0s, visibility 0s .3s;
    }

    .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
        -webkit-transition: opacity .3s 0s, visibility 0s 0s;
        -moz-transition: opacity .3s 0s, visibility 0s 0s;
        transition: opacity .3s 0s, visibility 0s 0s;
    }

    .cd-top.cd-is-visible {
        /* the button becomes visible */
        visibility: visible;
        opacity: 0.6;
    }

    .no-touch .cd-top:hover {
        background-color: #e86256;
        opacity: 0.6;
    }

/* Footer */

    .fixed_footer {
      width: 100%;
      height: 350px;
      background: #111;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: -100;
    }

    .fixed_footer p {
      color: #696969;
      column-count: 2;
      column-gap: 50px;
      font-size: 1em;
      font-weight: 300;
    }

/* Miscellaneous */

    a {
        text-decoration: none;
    }

    li {
        list-style: none;
    }

    /* Font Fix */

    body {
        -webkit-animation-delay: 0.1s;
        -webkit-animation-name: fontfix;
        -webkit-animation-duration: 0.1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
    }

    @-webkit-keyframes fontfix {
        from { opacity: 1; }
        to   { opacity: 1; }
    }

/* Delete */

    .section {
        max-width: 100%; 
        height: 42em;
        padding: 10px;
    }

    .section h2 {
        color: #fff;
        font-size: 6em;
        font-weight: 200;
        text-align: center;
        padding: 2.5em 0;
    }

    .one {
        background: #6bb6ff;
    }

    .two {
        background: #1E90FF;
    }

    .three {
        background: #8B4789;
    }

    .four {
        background: #872657;
    }

此外，here是一个粗略的小提琴。

Answer 1

以下行（big.css中的＃136）是罪魁祸首：

font: 300 1em/1.5 'Merriweather', serif;

这会将之前的“Roboto”字体声明覆盖为“Merriweather”，而不会在任何地方加载。

另外，不要忘记在font-family: "Roboto", sans-serif添加一个尾随分号。

您的浏览器内置开发人员工具，即元素检查器，在解决CSS问题时是您最好的朋友。

在这种特殊情况下，我按CTRL + SHIFT + I打开Chrome开发工具元素检查器，导航到“元素”标签（您也可以右键单击）一个特定的元素）并查看应用了body元素的CSS规则，它揭示了覆盖：

enter image description here

删除线通知您未应用规则，可能是因为它无效或其他规则优先。

未显示的字体已尝试修复

1 个答案: