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

问题

I am using sublime 3 for html and css.

I have saved the files with proper extension. Have used google fonts to add the font "Lobster". When I open this .html file on google chrome, it isn't working (i.e., the lobster font) but it's working when I try to run it on codepen. I'm using a system running on windows xp. I tried running the same thing on my laptop with windows 10 and the chrome browser is updated but the problem isn't going.

It's working on the editor of stack overflow as well.

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

回答1:

When you load the html file locally into your browser, it will use the file: protocol. And since you have href="//fonts.googleapis.com for the font, the browser will attempt to load that one too using the file: protocol.

Solution: use the full URL for the font path, including the proper protocol.

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

The reason that it works here in a SO snippet or on codepen is that you call up these pages with http: already.

回答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;
}

to use google fonts you should follow the rules

来源：https://stackoverflow.com/questions/38812196/why-is-my-code-working-on-codepen-but-not-on-my-editor

标签

html

css

twitter-bootstrap-3

google-font-api