html - Cloud9 IDE 不显示 Google 字体

标签 html css cloud9-ide google-font-api

我尝试在 Cloud9 IDE 上使用 Google 字体,但页面一直显示默认字体。

起初我以为我的代码有问题,但我已将 HTML 和 CSS 剥离到最低限度,但它仍然无法正常工作。

我在 codepen.io 上尝试了相同的代码,在那里它工作得很好。

Cloud9 上的 Google 字体是否存在已知问题,或者我遗漏了什么?

这里是 Workspace in Cloud9 的链接和 Pen in Codepen .

这是我正在使用的代码。

HTML:

<head>

      <link href="test.css" rel="stylesheet">
      <link href="http://fonts.googleapis.com/css?family=Lato:300,400&subset=latin,latin-ext" rel="stylesheet" type="text/css">

</head>

<body>
        <h1>This is a text.</h1>
</body>

CSS:

h1 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

最佳答案

您正在从 HTTP 资源加载字体,而 Cloud9 的预览正在通过 HTTPS 加载 html 页面。尝试将字体 url 的协议(protocol)更改为 https。您可以在浏览器的控制台中找到错误消息:http://screencast.com/t/2vIF2y2rLZt

关于html - Cloud9 IDE 不显示 Google 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25654285/

相关文章:

css - 当html文档中有多个图像时如何定位图像

javascript - Jquery Accordion 自动关闭

css - 三列网格响应

html - 屏幕调整大小时如何固定输入旁边的按钮位置

html - 尝试对齐列表容器内的文本时出现问题

ruby-on-rails-4 - 云 9 IDE 上的 Rails 服务器被杀死

javascript - Node.js 回调问题

javascript - js/html5 显示本地存储

javascript - 从父元素取消绑定(bind)滚动事件并绑定(bind)到子元素

html - 将按钮放在表格上方,与表格右侧对齐