用于 Tumblr 的 Base64 编码 @font-face答案

【问题标题】：Base64 encoded @font-face for Tumblr用于 Tumblr 的 Base64 编码 @font-face
【发布时间】：2017-02-23 22:15:55
【问题描述】：

由于 Tumblr 不接受托管在其他域上的 webfont 文件，我正在尝试使用 Base64 编码直接导入文件。

这是我使用的格式：

@font-face {
  font-family: 'FontName';
  src: url(data:application/vnd.ms-fontobject;base64,[BASE64 CODE]);
  src: url(data:font/woff2;base64,[BASE64 CODE]) format('woff2'),
       url(data:application/font-woff;base64,[BASE64 CODE]) format('woff'),
       url(data:application/x-font-truetype;base64,[BASE64 CODE]) format('truetype');
}

我尝试将其与适当的代码粘贴到 Tumblr CSS 编辑器、样式标记中的 HTML 编辑器和外部样式表中，但没有任何成功。我做错了什么？

【问题讨论】：

是否被 Tumblr 过滤掉了（保存/提交时）？还是它出现在实际页面上但它不起作用？ [你有示例页面吗？]
@Philip 似乎没有被过滤掉。在最新版本中，它是通过托管在 static.tumblr.com 上的外部样式表加载的，这是我的首选方法，因为 Base64 会使代码混乱。这是我尝试将 webfont 导入到的站点：khrelated.tumblr.com
使用 Chrome 检查页面时，我看到多个类似这样的错误：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://khrelated.tumblr.com' is therefore not allowed access. 由于缺少策略标头，似乎连文件本身都没有加载

标签： css base64 font-face tumblr webfonts

【解决方案1】：

似乎我使用的 Base64 编码器生成的代码不起作用。对于遇到相同问题的任何人，请尝试使用此编码器：https://www.giftofspeed.com/base64-encoder/

【讨论】：