个人中心
gpt4 book ai didi

html - 未应用 Google 字体。我正在尝试将 Google 字体应用于容器内的文本

转载 作者：太空宇宙 更新时间：2023-11-04 00:38:34 25 4
gpt4 key购买 nike

嘿，我刚开始使用 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>

最佳答案

在头部部分使用这个:

<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>

关于html - 未应用 Google 字体。我正在尝试将 Google 字体应用于容器内的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58843338/

25 4 0
文章推荐： c - 为什么 sizeof() 是一个 char 数组，有时是 sizeof(void *) 有时是 sizeof(the array)？
文章推荐： c - C语言中stderr的使用
文章推荐： c - 我不明白为什么这个程序总是崩溃
文章推荐： Jquery addClass 函数在 Firefox 中不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com