Google Blogger 和跨域网络字体可能吗？

Question

有没有人通过 Google Blogger 成功使用托管在不同服务器上的网络字体？

对于 Blogger，我无法访问 Google 服务器，因此我必须将这些字体文件上传到我自己的服务器。

托管在我的服务器或保管箱上的文件不起作用。

Chrome 版本 37 火狐32

@font-face {
font-family: 'fontname';
src: url('www.website.com/fonts/austie_bost_envelopes-webfont.eot');
src: url('www.website.com/fonts/austie_bost_envelopes-webfont.eot?#iefix') format('embedded- opentype'),
url('www.website.com/fonts/austie_bost_envelopes-webfont.svg#fontname') format('svg'),
url('www.website.com/fonts/Austie_Bost_Envelopes.otf') format('opentype'),
url('www.website.com/fonts/austie_bost_envelopes-webfont.ttf') format('truetype'),
url('www.website.com/fonts/austie_bost_envelopes-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontname';
src: url('/fonts/austie_bost_envelopes-webfont.svg') format('svg');
}
}

body {
-webkit-font-smoothing: antialiased;
}

也尝试了dropbox方法。

@font-face {
font-family: 'fontname';
src: url('https://www.dropbox.com/s/t4l791ueeurf96g/austie_bost_envelopes-webfont.eot');
src: url('https://www.dropbox.com/s/t4l791ueeurf96g/austie_bost_envelopes
webfont.eot?#iefix')format('embedded-opentype'),
url('https://www.dropbox.com/s/st6vddetjrti6d8/austie_bost_envelopes-webfont.woff')
format('woff'),
url('https://www.dropbox.com/s/mv0gd03th9fyu4x/austie_bost_envelopes-webfont.ttf')
format('truetype'),
url('https://www.dropbox.com/s/1idght73mxxdiz3v/austie_bost_envelopes-webfont.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
} 

• 检查 url 是否正确 服务器和 Dropbox

• 代码粘贴在正确的位置， 内部部分]]>

• 正确引用
  字体系列：'bang'，衬线；

• 选中 Firefox“允许页面使用自己的字体”设置

在搜索中找到：

• 出于安全原因，Firefox 不允许您嵌入来自另一个域的 @font-face 文件。 https://productforums.google.com/forum/#!topic/blogger/WPK2zD4xYv4

Answer 1

找到解决方案。在进一步研究中，我发现只有使用适当的代码 sn-p 才能实现跨域共享：

（我有一个安装了 Wordpress 的服务器，我将此代码添加到 .htaccess 文件中。

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/otf .eot
AddType font/otf .woff
AddType font/otf .svg
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
SetEnvIf Origin "http(s)?://(www\.)?(domain1.org|domain2.com|domain3.net)$" AccessControlAllowOrigin=$0$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true

AddType 指令将适当的 MIME 类型添加到 HTTP 响应中。该指令仅将其包含的指令应用于扩展名为 .ttf、.otf 和 .eot 的文件。该指令检查是否加载了 Apache 标头模块。最后，当满足这些条件时，我们将 Access-Control-Allow-Origin 标头设置为“*”以允许所有连接或仅指定选择 url。

参考网站：

修复-firefox-font-face-cross-domain_25

cdn 字体

如果有人愿意解释一下 Apache 标头是什么，我认为它会很有用。

干杯！