如何在 JSFiddle 中包含 Google 字体？答案

【问题标题】：How to include Google Font in JSFiddle?如何在 JSFiddle 中包含 Google 字体？
【发布时间】：2014-12-30 06:41:39
【问题描述】：

我试图在 jsFiddle 中包含 Google 字体但没有成功。我将 URL 添加到“外部资源”，但它包含为 <script>。

这是我想要包含的字体：

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

【问题讨论】：

【解决方案1】：

在您的 HTML 页面（或模板）上找到这一行：

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

并将其更改为：

<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

这个简单的更改将使您的浏览器以适用的模式（HTTP 与 HTTPS）调用 Google 字体页面。

【讨论】：

【解决方案2】：

如果您没有任何在线url，您可以使用dataURL（仅在本地计算机上可用）

@font-face {
  font-family: 'us101';
  src: url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQA...);
}

【讨论】：

【解决方案3】：

Webfonts 必须包含在 CSS 象限中，使用 @import：

@import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);

【讨论】：

url中必须是https而不是http。
@Bula，不需要使用https。但是，y 删除了协议，让浏览器决定最好的协议。见这里：stackoverflow.com/questions/18026809/…
记得将@import 规则放在 CSS 页面的最顶部。还要检查您的控制台是否存在可能阻止样式出现的错误。