jsfiddle - 如何在 JSFiddle 中包含 Google 字体？

Question

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

这是我要包括的字体：

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

score 32 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

在您的 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 字体页面。

3 回答 3