Javascript 在bookmarklet中使用@import和@font-face（适用于Chrome，但不适用于Firefox）

我制作了一个非常简单的直接书签来测试我们正在开发的开放式web字体。它在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);

---

FF将在此处投诉

innerText

。尝试改用

innerHTML

编辑1

更多信息-选择最适合你的

编辑2

我一直在挣扎，这对我来说没有意义。。。 因此，这里还有一些可能产生结果的路线：

尝试将完整路径添加到字体文件（例如

https://dl.dropbox.com/...

）在样式表中

不要使用导入，请尝试添加两个元素，如下所示：

这两种方法都不适合我，但可能值得一试。

---

我如此困惑的原因是谷歌字体就是这样添加的；而且它们在firefox中工作得非常好

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

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

或：

---

也许在前面加一个空格！重要吗？不知道是不是required@prash我想可能就是这样。你知道如何通过bookmarklet解决这个问题吗？（如果有的话）实际上innerText在Firefox中工作，显然是这个问题：作为一个bookmarklet解决哪一个问题可能要复杂得多：/啊，好吧，这很奇怪但很酷！仅供参考，它在windows 7（我的设置）上的FF 14.0.1上不起作用；它只是添加了一个空的

。MDN还有一篇关于

.textContent

的文章，其中提到了它，并暗示它不应该工作：。如果我是你，一旦我解决了主要问题（文件来源），我会将它改为使用

.innerHTML

或

.textContent

，我想我只是用CSS中字体文件的Base64编码解决了它。现在它可以在Firefox和Chrome上使用（至少在OSX上）。谢谢基本编码也适用于我。对于谷歌字体是如何工作的，但对你的字体却不清楚。无论如何，很高兴它为你工作！

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