Firefox 上 Tumblr 的 Base64 字体编码答案

【问题标题】：Base64 Font Encoding for Tumblr on FirefoxFirefox 上 Tumblr 的 Base64 字体编码
【发布时间】：2012-12-05 00:06:15
【问题描述】：

我正在开发一个 Tumblr 主题，并想使用我在所有浏览器中都有的字体。因为 Firefox 不允许对其他域的 css 字体进行 http 请求，所以目前该字体在 Firefox 中不起作用，但在所有其他使用标准 @font-face 语法的浏览器中都可以使用。

环顾四周，发现了使用 base64 将字体直接编码到 css 文件的建议。现在尝试这样做，但它不起作用。我以前从未使用过这种技术，所以我可能只是遗漏了一些东西。我从 tumblr 主题链接到样式表，并将 font-family:futuraBold 分配给某些元素。

样式表如下所示：

  @font-face {
    font-family: “futuraBold”;
    src: url(“data:font/opentype;base64,BASE64CODE”);
}

并上传了 .otf 字体文件。

我错过了什么吗？

【问题讨论】：

我的建议是在专家模式下尝试Font Squirrel 并选择 Base64 编码。然后，看看它是否不起作用。
例如，我尝试了 Oswald，这是它给我的编码字符串的开头：src: url(data:application/x-font-woff;charset=utf-8;base64,...
您的样式表中真的有那些花哨的引号（“）吗？您应该将它们替换为普通的双引号 (")。
@Chris 你让它工作了吗？我正在使用较小的 .woff 文件为 IE9+ 和 Firefox 支持做类似的事情，但它不起作用。 if (navigator.userAgent.indexOf("Internet Explorer")>-1||navigator.userAgent.indexOf("Firefox")>-1) {if (navigator.userAgent.indexOf("Firefox")>-1) {fontload=document.createElement('style');fontload.setAttribute('type','text/css');fontload.setAttribute('id','fontload')fontload.innerHTML = "@font-face{ font-family: \"SEGOEUIL\"; src: local('☺'),url(data:application/x-font-woff;charset=utf-8;base64,...)

【解决方案1】：

除了你我认为你不需要任何引号，单引号或双引号之外，所有这些都是正确的。它应该是这样的：

@font-face {
    font-family: futuraBold;
    src: url(data:font/opentype;base64,BASE64CODE);
}

希望这有帮助

【讨论】：