在Tumblr中使用@font-face

Question

我想在我的Tumblr上使用从字体铸造厂购买的自定义字体。该字体铸造厂使用的方法是@font-face。我将文件（.eot、.svg、.ttf和.woff）上传到了我的服务器，链接了样式表，并在我的CSS中添加了正确的属性。我允许从我的服务器热链接到我的Tumblr地址。但这也没有起作用。这里的另一个用户建议直接将文件上传到Tumblr上，但我仍然在控制台中收到以下错误信息：

(index):1 Font from origin 'http://static.tumblr.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mysite.tumblr.com' is therefore not allowed access.

我不知道如何更改我的服务器上的跨域设置，而且这不是我的个人服务器，所以我没有权利进行此类更改。

有经验在Tumblr上使用自定义字体的人请分享最佳方法。

谢谢。

- drchae

---

欢迎来到Stack Overflow！该网站主要用于编程问题。请随意查看“帮助-->网站导览”以了解有关该网站的信息，并获得您的第一个徽章！ - Jonathan

不是严格的重复，但您需要对字体进行 base64 编码：https://dev59.com/oWzXa4cB1Zd3GeqPQzDe - mikedidthis

请查看Nutty Themes关于此问题及可能解决方案的完整答案。 - Ally

Answer 1

使用link rel添加样式表。

然后将您的字体上传到一个主机上，您可以在其中添加一个 .htaccess 文件以允许跨域使用字体。

.htaccess：

      <FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
      <IfModule mod_headers.c>
          Header set Access-Control-Allow-Origin "*"
      </IfModule>
  </FilesMatch>
AddType application/vnd.ms-fontobject .eot
  AddType application/octet-stream .otf .ttf

这里有解释： http://blog.jiffle.net/post/31490944631/font-face-with-tumblr

我是用这种方式为我的tumblr设置了自定义字体。

- littlequest