使用位于不同服务器上的自定义字体[重复]答案

【问题标题】：Using custom font located on a different server [duplicate]使用位于不同服务器上的自定义字体[重复]
【发布时间】：2013-05-23 18:08:35
【问题描述】：

我必须在其中一个网页上使用自定义字体。我在我的 CSS 中使用 @font-face。

现在，我不确定，但我认为要使其正常工作，字体应该与网页位于同一台服务器上。这是正确的吗？我尝试过使用不同的服务器，但它没有用。所以，我不确定我是否遗漏了什么或者其他服务器托管的字体不起作用。

如果可行，那么是否就像在 t @font-face 的 url 部分中提及完整的 URL 一样简单？还是我需要做更多的事情？有什么限制？我知道 IE .eot 字体可以工作。

谢谢。

【问题讨论】：

我在这里可能非常错误，但我认为字体必须在客户端计算机中。服务器是否有它应该无关紧要，因为它是由浏览器加载的，而不是服务器端代码，对吧？
@Renan ：不是真的。这就是引入 font-face 的原因。 :-)
@harsha 生活和学习...我希望我能支持你的评论。
@harsha 是的，我也投了这样的票，但我的意思是给你代表 :)
@Renan ：我可能也不完全正确。正如保罗在这里评论的那样，Access-Control-Allow-Origin 标头是必要的

标签： javascript css frontend

【解决方案1】：

您以前听说过 Google 字体吗？

http://www.google.com/fonts/

这是将自定义字体从其他服务器（在本例中为 Google 的服务器）导入您的网站的最简单方法。

选择您的字体并将此代码添加到您的网页上

<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>

如果我跟踪网址，它将显示此详细信息

@font-face {
  font-family: 'Days One';
  font-style: normal;
  font-weight: 400;
  src: local('Days One'), local('DaysOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/daysone/v3/yfpXiXt9Xp5H97keqlB0t_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

希望这会有所帮助:)

【讨论】：

是的，我听说过 google 字体，但我认为您只能使用它们托管的字体。我可以在谷歌字体上上传我的字体并使用它吗？
我不这么认为，对不起.. 至少现在是这样。最后一个选项是使用图像，但加载会花费更多字节

【解决方案2】：

是的，您可以使用位于另一台服务器上的字体。

一个例子

@font-face 
{
    font-family: 'EndzoneSansLight';
    src: url('//:') format('no404'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.eot?#iefix') format('eot'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.woff') format('woff'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.ttf') format('truetype'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

这是FIDDLE

【讨论】：

它在 IE8 及更低版本上工作吗？我不这么认为:(
@Leon : 如果相同的服务器字体适用于 IE8 或更低版本，即使这样也应该
@Leon : 另外，为什么你需要另一个服务器的字体？你不能把字体上传到你的服务器吗？
我们的产品存在限制。在这里很难描述，但相信我，我不能。
@Leon ：您不必详细解释。如果您能告诉我们一些有关从其他服务器包含字体的必要性，我们可能会为您提供更好的帮助。