无法呈现 Google 字体

Question

所以我才刚刚开始学习 HTML 和 CSS，我无法在具有 Google 字体链接字体系列的 <div> 中呈现文本关联的。这是 fiddle：Link to fiddle

这是html：

<!DOCTYPE html>
    <link href="fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">
    <title>Genuine CV</title>
    <link href="css/hover.css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="css/cvstyle.css">
<body>
<div class="header">
    <div class="navbar" >
        <button class="contact hvr-fade">Contact Me</button>
    </div>
    <div class="name">
        <p> Header Text</p>
    </div>
</div>
</body>

这里是 CSS:

body {
    background-color: #433E49 ;
}

button:focus {outline:0;}

.header {
    margin: auto;
    height: 700px;
    width: 50%;
    /* solid corresponds to color visibility */
    /*border: 2px solid #CBD0D8;*/
    padding: 0px;
    background-color: whitesmoke;
}

.navbar {
    margin: auto;
    height: 24px;
    width: 100%;
    /* solid corresponds to color visibility */
    /*border: 2px solid #CBD0D8;*/
    background-color: #433E49 ;
}

.contact {
    /*remove blue border from chrome*/

    background:    #7f727d;
    border:        1px solid #928490;
    color:         #fff;
    display:       inline-block;
    padding:       5px 20px;
    font:          normal 400 12px/1 "Open Sans", sans-serif;
    text-align:    center;
    text-shadow:   1px 1px 0 #000;
    float: right;
}

.name {
    background:    #fff;
    color:         #000;
    padding:       25px 40px;
    line-height: 1;
    font-weight: 400;
    font-variant: normal;
    font-style: normal;
    font-size: 45px;
    font-family: "Lobster Two", cursive;
    text-align:    center;
    text-shadow:   1px 1px 0 #fff;
}

我哪里做错了？谢谢。

Answer 1

改变

<link href="fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">

至

<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">

Answer 2

在旁注中，可能与 相关，也可能不相关：（这也将解决您的问题）

如果复制 Google CSS sheet 的内容，可以 将 http requests 的数量减少 1进入你的主 CSS sheet.

如果您决定这样做，您可以继续并从 <head> 部分删除对 google fonts Stylesheet 的引用

这是一个工作示例

@font-face { font-family: 'Lobster Two'; font-style: normal; font-weight: 400; src: local('Lobster Two'), local('LobsterTwo'), url(http://fonts.gstatic.com/s/lobstertwo/v9/Law3VVulBOoxyKPkrNsAaI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } body { background-color: #433E49; } button:focus { outline: 0; } .header { margin: auto; height: 700px; width: 50%; /* solid corresponds to color visibility */ /*border: 2px solid #CBD0D8;*/ padding: 0px; background-color: whitesmoke; } .navbar { margin: auto; height: 24px; width: 100%; /* solid corresponds to color visibility */ /*border: 2px solid #CBD0D8;*/ background-color: #433E49; } .contact { /*remove blue border from chrome*/ background: #7f727d; border: 1px solid #928490; color: #fff; display: inline-block; padding: 5px 20px; font: normal 400 12px/1"Open Sans", sans-serif; text-align: center; text-shadow: 1px 1px 0 #000; float: right; } .name { background: #fff; color: #000; padding: 25px 40px; line-height: 1; font-weight: 400; font-variant: normal; font-style: normal; font-size: 45px; font-family: "Lobster Two", cursive; text-align: center; text-shadow: 1px 1px 0 #fff; }

<title>Genuine CV</title> <link href="css/hover.css" rel="stylesheet" media="all"> <link rel="stylesheet" href="css/cvstyle.css"> <body> <div class="header"> <div class="navbar"> <button class="contact hvr-fade">Contact Me</button> </div> <div class="name"> <p>Header Text</p> </div> </div> </body>

无法呈现 Google 字体

Unable to Render Google Font

html

css

google-font-api