类似 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:// 协议(protocol)时 - 我会得到这样的渲染:
...也就是说，好像完全忽略了@import；如果我打开 http://fonts.googleapis.com 也会发生同样的情况在不同的选项卡中，在 NoScript 中允许它，然后我返回到本地 HTML 并在那里刷新它。但是，如果我打开一个新的 Firefox 实例，例如:
firefox -no-remote -P "some other profile" /tmp/ttt.htm
...然后字体被正确渲染。
有没有什么方法可以在 Firefox 的 NoScript 中正确呈现这个例子 - 一旦给出了 NoScript 权限？
最佳答案
NoScript 默认阻止网络字体。这包括@font-face 和@import。这是一个可配置的偏好:
NoScript menu → Options... → Embeddings tab → Forbid @font-face
这是因为庞大的 FreeType 字体库最初并非设计用于通过网络加载不受信任的内容。它在过去 5 年中存在已知漏洞， future 可能会出现漏洞。
关于html - 在带有 Noscript 的 Firefox 中对 html/css 字体使用 @import(Google 字体不呈现)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33887285/