在书签中使用 @import 和 @font-face（适用于 Chrome，但不适用于 Firefox）答案

【问题标题】：Using @import and @font-face in a bookmarklet (works in Chrome, but not in Firefox)在书签中使用 @import 和 @font-face（适用于 Chrome，但不适用于 Firefox）
【发布时间】：2012-08-01 13:56:40
【问题描述】：

我制作了一个非常简单直接的书签来测试我们正在开发的开放网络字体。它在 Chrome 中就像一个魅力，但在 Firefox 中却失败了，关于如何让它跨浏览器工作的任何提示（我是一个真正的 JS 新手，主要是复制粘贴然后祈祷它工作）。代码如下：

javascript:var%20addFont%3Ddocument.createElement(%22style%22)%3BaddFont.innerText%3D%22%40import%20url(%27https://dl.dropbox.com/u/16808833/webfontkit-20120729-105013/stylesheet.css%27)%3B%20*%7Bfont-family:%20%27OpenfontRegular%27!important%3Bfont-weight:%20normal!important%3B%7D%22%3Bdocument.body.appendChild(addFont)%3B

或者以更易读的格式：

javascript:
var addFont=document.createElement('style');
addFont.innerText="
  @import url('https://dl.dropbox.com/u/16808833/webfontkit-20120729-105013/stylesheet.css');
  *{
    font-family: 'OpenfontRegular'!important;
    font-weight: normal!important;
  }";
document.body.appendChild(addFont);

【问题讨论】：

也许在 !important 之前添加一个空格？不确定是否需要
stackoverflow.com/questions/2856502/…
@prash 我想可能是这样。知道如何通过书签解决这个问题吗？（如果有的话）

标签： javascript css import font-face bookmarklet

【解决方案1】：

FF 会在这里抱怨innerText。尝试改用innerHTML

编辑 1

有关它的更多信息 - 选择最适合您的！ 'innerText' works in IE, but not in Firefox

编辑 2

我一直在努力解决这个问题，对我来说没有意义...... 所以这里还有一些可能会产生结果的路线：

尝试在样式表中添加字体文件的完整路径（例如https://dl.dropbox.com/...）
不要使用导入，而是尝试像这样添加两个元素：

var addLink = document.createElement('link');
addLink.rel = "stylesheet";
addLink.type = "text/css";
addLink.href = "https://dl.dropbox.com/u/16808833/webfontkit-20120729-105013/stylesheet.css";
document.head.appendChild(addLink);

var addFont=document.createElement('style');
addFont.innerHTML="* {   font-family: 'OpenfontRegular' !important;    font-weight: normal!important;  }";
document.body.appendChild(addFont);

这些都没有真正为我工作，但可能值得一试。我很困惑的原因是这就是添加 googlefonts 的方式；它们在 Firefox 中完美运行！

【讨论】：

实际上 innerText 在 Firefox 中工作，显然是这个问题：stackoverflow.com/questions/2856502/… 作为书签解决起来可能要复杂得多：/
啊好吧，这很奇怪但很酷！仅供参考，然后它不适用于 Windows 7 上的 FF 14.0.1（我的设置）；它只是添加了一个空的<style/>。 MDN 也有一篇关于 .textContent 的文章提到它并暗示它不应该工作：developer.mozilla.org/en/DOM/Node.textContent。如果我是你，一旦我发现了主要问题（文件来源），我会将其更改为使用 .innerHTML 或 .textContent
我想我只是使用 CSS 中字体文件的 Base64 编码解决了它。现在它可以在 Firefox 和 Chrome 中运行（至少在 OSX 上）。谢谢！
基本编码也适用于我。仍然对这对 googlefonts 的工作方式感到困惑，但对你的却没有。无论如何，很高兴它为你工作！

【解决方案2】：

由于 Firefox 不允许远程调用 @font-face 文件，我通过使用 Base64 编码将字体信息嵌入到 CSS 文件中解决了这个问题。这是 FontSquirrel @font-face 生成器中提供的一个选项，它允许小书签导入字体。这是跨浏览器工作的书签代码：

javascript:%20newSS%20=%20document.createElement('link');%20newSS.rel%20=%20'stylesheet';%20newSS.href%20=%20'http://dl.dropbox.com/u/2040562/beta0.1/bookmarklet.css';%20document.head.appendChild(newSS);%20void%200

或：

javascript:
newSS = document.createElement('link');
newSS.rel = 'stylesheet'; newSS.href = 'http://dl.dropbox.com/u/2040562/beta0.1/bookmarklet.css';
document.head.appendChild(newSS);
void 0

【讨论】：