CSS文件中的Google字体https链接答案

【问题标题】：Google Fonts inside CSS file https linkCSS文件中的Google字体https链接
【发布时间】：2015-02-04 01:03:07
【问题描述】：

我在我的 CSS 样式表中使用 Google Web 字体，如下所示

@font-face {
 font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
     src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

但是当我的网站从受保护的页面转到时，我得到“仅显示受保护的内容”。我使用了 Google Chrome 资源检查器，上面指出了问题

如何在我的 CSS 文件中添加指向 Google Web 字体的安全链接

谢谢

【问题讨论】：

您是否尝试在代码的最后一行将 http:// 更改为 https://？

标签： css https google-webfonts

【解决方案1】：

您不需要@font-face 来使用 Google 字体。

只需在您的 HTML 代码中添加：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

然后在您的 CSS 中添加字体名称。示例：

body{font-family: 'Open Sans', sans-serif;}

【讨论】：

实际上，它对我不起作用。我有字体粗细为 400 和 300 的 Open Sans。当我使用 <link...> 时，只有 IE 和 Chrome 能够呈现正确的字体，而 FF 不能。一旦我将其更改为使用@font-face，它也适用于 FF

【解决方案2】：

有点旧，但它出现在相关搜索中，因此它可能对某人有用。

我个人将@font-face 声明放在我的样式表中，而不是在头部请求它。只需删除下面的“http：”即可解决问题。

url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');

【讨论】：

【解决方案3】：

为什么不使用@import 语句？

在您的 css 文件的顶部：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

【讨论】：