嘿，我刚开始使用HTML。我一直在尝试将谷歌字体应用到我的网站上，但我认为它们似乎不适用。这是我的剧本。我正在尝试将字体苹果化到.middlescreen容器中。我尝试了标准方法和导入方法，但似乎都不起作用
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css"/>>
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
<style>
* {
box-sizing: border-box;
}
.middleScreen {
position:absolute;
top: 50%;
left: 50%;
width : 100px ;
height : 100px ;
background-color : orange ;
margin-top: -50px; /* = - 1/2 of the height*/
margin-left: -50px; /* = - 1/2 of the width*/
text-align: center;
}
div.middlescreen p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
font-family: 'Raleway', sans-serif;
</style><div class="middleScreen">
<p><font color="white">Welcome to the </font></p>
<p><font color="white">New Home</font></p>
</div>
</div>
</body>在标题部分使用this：
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
.middleScreen {
position:absolute;
top: 50%;
left: 50%;
width : 100px ;
height : 100px ;
background-color : orange ;
margin-top: -50px; /* = - 1/2 of the height*/
margin-left: -50px; /* = - 1/2 of the width*/
text-align: center;
}
.middleScreen p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-family: 'Raleway', sans-serif;
color: #fff;
line-height: 40px;
}
</style>
</head>
<body>
<div class="middleScreen">
<p>Welcome to the</p>
<p>New Home</p>
</div>
</body>
</html>