在不同网站之间链接Glyphicon字体（Bootstrap）

Question

我正在学习如何使用Bootstrap。由于我有几个网站，我希望将Bootstrap样式表 - bootstrap.css和bootstrap.min.css - 放在一个网站（“mysite.com”）上，并将其他网站链接到它们。

问题是这样做时，我的图标无法显示。我发现了一个名为“fonts”的文件夹，并将其复制到了mysite.com。然后我找到了需要更改的bootstrap.min.css中的样式：

@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-  regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix)  format('embedded-opentype'),url(../fonts/glyphicons-halflings- regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf)  format('truetype'),url(../fonts/glyphicons-halflings- regular.svg#glyphicons_halflingsregular) format('svg')}

实际上，看起来这两个是我需要改变的唯一选项：

url(../fonts/glyphicons-halflings-regular.woff) format('woff'),
url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),

但我一直没有能够重写链接以使它们正常工作。例如，url（http://mysite/css/bootstrap/fonts/glphicons(etc.)）无法工作。

是否可能跨站点链接glyphicon字体？如果不行，另一个可能性是我可以将样式表放在mysite.com上，但将字体复制到每个站点，然后将这些样式放在每个页面的头部，以便可以指向正确的目录。

- user2469520

---

我上个星期遇到了非常类似的问题，最终把.ttf文件复制到我的字体文件夹中，并使用font-face覆盖bootstrap的css以重置路径...我理解这并不完全是你需要的，所以给你点赞。 - mezod

我只是把那些样式放在我的头部区域，甚至无法使其工作。挑剔的字体。;) - user2469520

你可能想要查看类似http://www.bootstrapcdn.com/这样的内容。 - mezod

哇，你真是个心灵读者！我刚刚发现通过链接到<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">可以使它工作。我有点喜欢在我的网站上拥有样式表和JS文件，以防主机网站出现问题。但我可以保留备份副本。谢谢。 - user2469520

你可以使用CDN，同时将文件作为备用方案。 - mezod

Answer 1

字体文件受到跨域访问控制的限制。您需要将字体文件放在每个网站中，或者在托管字体文件的服务器上停用跨域访问控制，或者配置托管字体文件的服务器以允许您网站的域名访问。

对于Apache，您需要在Apache主配置文件或为提供字体文件的域名的.htaccess文件中设置一些设置。您需要加载或编译mod_headers Apache模块到服务器中。

这将设置字体文件的内容类型和编码。

AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType application/vnd.ms-fontobject .eot 
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

这将访问控制设置为允许来自 "sample.com" 的访问

<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
 <IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "sample.com"
 </IfModule>
</FilesMatch>

不同的浏览器自然会有不同的行为，因此请务必在所有可能的浏览器上测试这些更改。对于除Apache之外的服务器，您将需要使用它们的配置文件来执行与上述相同的操作。

将“sample.com”替换为您网站的URL，您也可以用“*”替换“sample.com”，但这样做将禁用字体文件上的控件。它会打开您的服务器，向任何尝试访问它们的其他站点提供这些文件。

- Michael Cresta