Question

我有以下html：

<div class="row">
            <div class="col-md-4 col-md-offset-1">
                <h2 class="uppercase claim claim-light slash headline-standard">Our Playbook</h2>
                <div class="paragraph">
                    Blah blah blah blah
                </div>
            </div>
             <div class="col-md-4 col-md-offset-1">
                <h2 class="uppercase claim claim-light slash headline-standard">The Special Sauce
                </h2>

                <p class="paragraph">
                    blah blah blah
                </p>
            </div>
        </div>

我正在尝试在类段上使用谷歌字体，所以我有这个css：

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.paragraph{
    font-family: 'Pacifico', cursive;
    text-shadow:1px 1px 0 rgba(48,48,48,1);
    color:#FFFFFF;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:1.3em;
    text-align:left;
    font-family:arial, helvetica, sans-serif;line-height:1;

}

任何其他css属性都能完美运行但不是字体系列，不知道为什么会这样吗？

我甚至试图把它包括在内：

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Answer 1

删除font-family:arial, helvetica, sans-serif;它超越您指定的第一个字体系列。

Answer 2

试试这个CODEPEN

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.paragraph{
    text-shadow:1px 1px 0 rgba(48,48,48,1);
    color:#FFFFFF;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:1.3em;
    text-align:left;
    line-height:1;
    font-family: 'Pacifico', cursive;
}

Answer 3

在您的CSS课程.paragraph中，font-family定义两次。

适用于特定元素或类的CSS规则是 CSS中定义的最后一条规则。

所以，font-family:arial, helvetica, sans-serif;它超越了font-family: 'Pacifico', cursive;

尝试 -

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.paragraph{
    font-family: 'Pacifico', cursive;
    text-shadow:1px 1px 0 rgba(48,48,48,1);
    color:#FFFFFF;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:1.3em;
    text-align:left;
}

Working Example

Google字体无法在css上运行

3 个答案: