Question

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

我保存了具有适当扩展名的文件。使用谷歌字体添加字体＆＃34;龙虾＆＃34;。当我在谷歌浏览器上打开这个.html文件时，它不起作用（即龙虾字体）但是当我尝试在codepen上运行它时它正在工作。我正在使用在Windows XP上运行的系统。我尝试在Windows 10的笔记本电脑上运行相同的东西，并且Chrome浏览器已更新，但问题仍未解决。

它也正在处理堆栈溢出的编辑器。

＆＃13;

.nav-pills {
  font-family: Lobster;
  font-size: 2.2em;
  background-color:black;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

它在SO片段或代码集中运行的原因是您已经使用http:调用这些页面。

Answer 2

＆＃13;

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

＆＃13;

使用谷歌字体你应该遵守规则

为什么我的代码在codepen上运行而在我的编辑器上运行？

2 个答案: