Question

我有一个相当奇怪的问题。我正在尝试在我的HTML头部中包含来自Google Fonts的字体“Yanone Kaffeesatz”，然后使用它来使用font-family属性设置我的h1和h2元素的样式。但即使我按照Google的说明操作，我的浏览器仍会显示标准的sans-serif字体。我哪里出错了？

屏幕截图：https://docs.google.com/drawings/d/1NCq3ch0ClzaWfniSDKQJa9C-fX9zXH8-R-I7GnjqqbI/edit?usp=sharing

代码：

<!DOCTYPE html> 
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css">
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
</head>



 h1, h2 {
    color: black;
    font-family: 'Yanone Kaffeesatz', sans-serif;
  }

Answer 1

您可能希望引用https：//协议而不是http：//。浏览器可能会阻止您尝试通过浏览器网址中加载的安全页面加载不安全的内容。

要对此进行测试，您还可以尝试在不使用https：//的情况下刷新您的网站，并查看它是否正确显示字体。

由于您的屏幕截图来自c9.io的预览网址，并且您最终的生产网站可能没有使用SSL。您可能希望通过省略协议的http：部分来更改链接href，只需使用
//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700将自动尝试从网站当前使用的任何协议中提取资源。

谷歌字体不起作用

1 个答案: