我正在为 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/