無法渲染谷歌字體

所以我剛開始學習HTML和CSS，我無法呈現<div>內的文本，有一個谷歌字體鏈接的字體家族的產生密切相關。這裏的小提琴：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; 
}

我在哪裏做錯了？謝謝。

來源

2016-12-03 Jeet.Deir

你可以也將鏈接標籤放在頭標籤內。 – Lujska

變化

<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">

來源

2016-12-03 09:32:11 tomaroo

在一個側面說明是可能會或可能不會相關：（這也將解決您的問題）

你可以減少http requests的數量加1如果你複製Google CSS表單的內容放入主CSS表單中。

如果你決定這樣做，你可以繼續從<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>

來源

2016-12-03 09:56:20

無法渲染谷歌字體

回答

相關問題