无法渲染谷歌字体

所以我刚开始学习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

无法渲染谷歌字体

回答

相关问题