Question

我正在制作一个html页面，已经过了一半，并决定开始设计一些东西。。。我的所有造型都很好！直到我试图获得谷歌字体。我按照所有说明将所有内容正确地插入到css中。但是，当我在Chrome上查看该页面时，它只显示＆＃34;后备＆＃34;通用sans-serif字体。这是我的css：

＆＃13;

#page-first-open {
	border: 1px solid black;
	width: 1000px;
	height: 500px;
	text-align: center;
	margin: auto;
	position: relative;
	top: 50px;
	
}

@import url(https://fonts.googleapis.com/css?family=Raleway);

#page-first-open p {
	font-size: ;
	font-family: 'Raleway', sans-serif;
	
}

＆＃13;

<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="test.css">
			<script>
			</script>
			<title>User Test</title>
		</head>
		<body>
			<div id="wrapper">
				<div id="page-first-open">
					<p>Hello, and welcome to this page. . .<br>
					If you don't mind me asking, <br>
					What is your name (or what you'd like to be called)?</p>
				</div>
			</div>
		</body>
	</html>

＆＃13;

有人可以告诉我我做错了什么（如果我做错了），或者指出我正确的方向让它发挥作用？

Answer 1

在声明之前，尝试将导入放在文件的顶部。

Answer 2

在文件顶部包含@import指令。

@import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
	border: 1px solid black;
	width: 1000px;
	height: 500px;
	text-align: center;
	margin: auto;
	position: relative;
	top: 50px;
	
}



#page-first-open p {
	font-size: ;
	font-family: 'Raleway', sans-serif;
	
}

<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="test.css">
			<script>
			</script>
			<title>User Test</title>
		</head>
		<body>
			<div id="wrapper">
				<div id="page-first-open">
					<p>Hello, and welcome to this page. . .<br>
					If you don't mind me asking, <br>
					What is your name (or what you'd like to be called)?</p>
				</div>
			</div>
		</body>
	</html>

Answer 3

您可以删除：

@import url(https://fonts.googleapis.com/css?family=Raleway);

并添加：

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

致<head>。像这样：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="test.css">
            <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
            <script>
            </script>
            <title>User Test</title>
        </head>
        <body>
            <div id="wrapper">
                <div id="page-first-open">
                    <p>Hello, and welcome to this page. . .<br>
                    If you don't mind me asking, <br>
                    What is your name (or what you'd like to be called)?</p>
                </div>
            </div>
        </body>
    </html>

Answer 4

尝试在html代码的head部分添加以下内容，看看是否修复了问题： <meta charset="UTF-8"> 此外，您需要将 @import 移至CSS文件的顶部，以便加载字体

Google字体无法使用CSS？

4 个答案: