Question

我正在建立一个响应式网站。使用w3schools演示作为模板开始。我一直遇到字体问题。我试图让h1成为Roboto Bold。任何帮助将不胜感激。

#welcome{
font-family: "Roboto", sans-serif;
font-weight: bold;

如果有人可以帮助这个字体，也可能清理它有点像分离CSS和HTML将非常感激，因为我在尝试时不断破坏某些东西。（或清理w3schools的所有班级ID）

Answer 1

现在运行代码片段，您需要的字体已添加到文档中，粗体字体正在运行。从我的代码中删除“body {background-color：gray}”，我添加了深色背景以在文档中显示白色文本/内容。

body{background-color:gray}
    *{
    margin: 0;
    padding: 0;
    }

    .welcome{
    	font-family: "Roboto", sans-serif;
    	font-weight: 700;
    }
    h1{
    	font-size:30px !important;
    }

    <!DOCTYPE html>
    <html>
    <title>W3.CSS Template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <style>

    body, html {height: 100%}
    .bgimg {
        background-image: url('images/bg.png');
        min-height: 100%;
        background-position: center;
        background-size: cover;
    }
    </style>
    <body>

    <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
      <div class="w3-display-topleft w3-padding-large w3-xlarge">
        Logo
      </div>
      <div class="w3-display-middle">
        <h1 class="welcome">Welcome to Launchpad</h1>
        <hr class="w3-border-grey" style="margin:auto;width:40%">
        <p class="w3-large w3-center">35 days left</p>
      </div>
      <div class="w3-display-bottomleft w3-padding-large">
        Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
      </div>
    </div>

    </body>
    </html>

Answer 2

您已将欢迎作为#的ID分配，在HTML文件中，您将在课程中添加欢迎。所以在css文件中试试这个：

.welcome {
font-family: "Roboto", sans-serif;
font-weight: bold;
}

Answer 3

问题是你的css中你正在触发id #welcome但是你必须把它写成一个类.welcome并且一切正常：）

所以它看起来像那样

.welcome {
font-family: "Roboto", sans-serif;
font-weight: bold;
}

字体重量不起作用

3 个答案: