为什么我的代码可以在 codepen 上运行，但不能在我的编辑器上运行？

Question

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

我已经用正确的扩展名保存了文件。已使用google字体添加字体"Lobster"。当我在 google chrome 上打开这个 .html 文件时，它不工作（即龙虾字体），但是当我尝试在 codepen 上运行它时它工作。我在 windows xp 上使用运行ning 系统。我尝试运行在我的笔记本电脑上使用 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>

Answer 1

当您将 html 文件本地加载到浏览器时，它将使用 file: 协议。因为你有 href="//fonts.googleapis.com 字体，浏览器也会尝试使用 file: 协议加载那个字体。

解决方案：使用完整的 URL 作为字体路径，包括正确的协议。

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

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

Answer 2

.nav-pills {
    /*edit your  font-family in css and the code will work done */
  font-family: 'Lobster', cursive;
  font-size: 2.2em;
  background-color:black;
}

要使用 google 字体，您应该遵守规则

为什么我的代码可以在 codepen 上运行，但不能在我的编辑器上运行？

Why is my code working on codepen but not on my editor?

html

css

google-font-api

twitter-bootstrap-3