Question

所以我刚刚开始学习HTML和CSS，我无法在<div>内呈现一个与Google字体链接字体系列相关联的文本。这是小提琴：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工作表的内容复制到主CSS工作表中，则可以将http requests的数量减少 1。

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

这是一个有效的例子

@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字体

2 个答案: