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

Using @import and @font-face in a bookmarklet (works in Chrome, but not in Firefox)

本文关键字：适用于 Chrome 不适用 Firefox face bookmarklet @import @font      更新时间：2023-09-26

我制作了一个非常简单的直接bookmarklet来测试我们正在开发的开放式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

关于它的更多信息-选择最适合你的'；innerText'；适用于IE，但不适用于Firefox

编辑2

我一直在挣扎，这对我来说毫无意义。。。因此，以下是一些可能产生结果的更多路线：

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

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);

这两种方法实际上都不适用于我，但可能值得一试。我之所以如此困惑，是因为这就是谷歌字体的添加方式；它们在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

或：

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
相关文章：