gpt4 book ai didi

html - 为什么我的代码可以在 codepen 上运行,但不能在我的编辑器上运行?

转载 作者:太空宇宙 更新时间:2023-11-03 22:54:51 25 4
gpt4 key购买 nike

我正在为 html 和 css 使用 sublime 3。

我已经用适当的扩展名保存了文件。使用谷歌字体添加字体“龙虾”。当我在谷歌浏览器上打开这个 .html 文件时,它不工作(即龙虾字体)但是当我尝试在 codepen 上运行它时它工作。我正在使用在 Windows XP 上运行的系统。我尝试在装有 Windows 10 的笔记本电脑上运行相同的程序,并且更新了 chrome 浏览器,但问题没有解决。

它也在堆栈溢出编辑器上工作。

.nav-pills {
font-family: Lobster;
font-size: 2.2em;
background-color:black;
}
<!doctype html>
<html>
<head>
<title>Puneeth</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
<link rel="stylesheet" href="portfolio.css" />
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills">
<li><a href="#">Puneeth S</a></li>
<li class="pull-right"><a href="#">Contact</a></li>
<li class="pull-right"><a href="#">Portolio</a></li>
<li class="pull-right"><a href="#">About</a></li>
<li class="pull-right"><a href="#">Home</a></li>
</ul>
</div>
</body>
</html>

最佳答案

当您在本地将 html 文件加载到浏览器时,它将使用 file: 协议(protocol)。由于您有 href="//fonts.googleapis.com 作为字体,浏览器也会尝试使用 file: 协议(protocol)加载该字体。

解决方案:使用完整的 URL 作为字体路径,包括正确的协议(protocol)。

href="http://fonts.googleapis.com/...

它在 SO 片段或代码笔中起作用的原因是您已经使用 http: 调用了这些页面。

关于html - 为什么我的代码可以在 codepen 上运行,但不能在我的编辑器上运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38812196/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com