在带有 Noscript 的 Firefox 中将 @import 用于 html/css 字体（Google 字体不呈现）？答案

【问题标题】：Use of @import for html/css fonts in Firefox with Noscript (Google fonts do not render)?在带有 Noscript 的 Firefox 中将 @import 用于 html/css 字体（Google 字体不呈现）？
【发布时间】：2016-02-26 12:26:01
【问题描述】：

https://css-tricks.com/snippets/css/using-font-face/ 等资源请注意，CSS @import 规则可用于字体，尤其是 Google 字体：

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

因此，我尝试编写以下最小示例（存储在本地 PC 中，例如 /tmp/ttt.htm）：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
body {
  /*font: 18px/27px 'Oxygen', sans-serif;*/
  font-family: 'Oxygen', sans-serif;
  font-size: 18px;
  line-height: 27px;
}
  </style>
</head>

<body>
 Testing a font here
</body>
</html>

但是，如果我在 Firefox 42 中使用 NoScript 打开它——即使/当我允许 file:// 协议时——我会得到这样的渲染：

...也就是说，好像@import已经被完全忽略了；如果我在另一个选项卡中打开http://fonts.googleapis.com，在 NoScript 中允许它，然后我返回到本地 HTML 并在那里刷新它，也会发生同样的情况。但是，如果我打开一个新的 Firefox 实例，例如：

firefox -no-remote -P "some other profile" /tmp/ttt.htm

...然后字体被正确渲染。

有什么方法可以在 NoScript 中的 Firefox 中正确呈现此示例 - 一旦授予 NoScript 权限？

【问题讨论】：

标签： html css firefox fonts

【解决方案1】：

默认情况下，NoScript 会阻止网络字体。这包括@font-face 和@import。这是一个可配置的偏好：

NoScript menu → Options... → Embeddings tab → Forbid @font-face

这是因为庞大的 FreeType 字体库最初并不是为了在 Web 上加载不受信任的内容而设计的。它在过去 5 年中存在已知漏洞，未来可能会出现漏洞。

【讨论】：

【解决方案2】：

啊，明白了 - 实际上，当这个页面被加载时，NoScript 图标上有一个黄色的小指示符，即使是在为file://（以及 NoScript 图标）授予权限之后没有被红色划掉）：

这意味着存在“被阻止的对象”——因此只需将鼠标悬停在该菜单项上，然后就可以允许字体 URL；然后一切都按预期工作......

【讨论】：