Webfonts：为什么我的字体没有显示？

Question

字体正常，但样式表杂乱无章，静态资产由应用程序服务器提供服务。当我将资产移至 CloudFront 时，我的字体停止工作。我创建了一个 https://jsfiddle.net/Lunhdb62/ 来举例说明这个问题：

CSS:

@font-face {
    font-family: 'Helvetica Neue Std 35 Thin';
    src: url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Th-cbecc0396d9eccbbeff4a92e06449eb1.woff) format("woff"),
         url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Th-94816ab73b42e623ce8fdd576647dbff.ttf) format("truetype");
}


@font-face {
    font-family: 'Helvetica Neue 75 Bold';
    src: url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Bd-4f24f787ae7577c7b0f8392ae2a62ad6.woff) format("woff"),
         url(http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Bd-4c5729a69333fbd9dfb4907d8eab440b.ttf) format("truetype");
}

p {
    font-size: 32pt;
    font-family: monospace;
}
p.normal {
    font-family:'Helvetica Neue 35 Thin';
}
p.bold {
    font-family:'Helvetica Neue 75 Bold';
}

HTML:

<p>monospace</p>
<p class="normal">Helvetica Neue Light</p>
<p class="bold">Helvetica Neue Bold</p>

附加问题：我在@font-face 声明中选择的 'font-family' 重要吗？或者它可以是我想要的任何东西？

Answer 1

首先，您的字体系列名称因细字体类型而异： Helvetica Neue Std 35 Thin 在声明中，Helvetica Neue 35 Thin 用于实际使用。

第二：你的字体位置应该在引号内：'http://d39wu5b1mi9u0h.cloudfront.net/assets/HelveticaNeueLTStd-Th-cbecc0396d9eccbbeff4a92e06449eb1.woff'

第三，您不能@font-face 托管在不同域上的字体。浏览器不允许这样做。您必须在同一个域中托管字体并从那里声明您的路径。

Answer 2

根据我的经验，从 CDN 加载字体会导致 IE 和 FF 出现问题，问题是它们无法加载。我为此尝试了多种修复，但对我没有用，特别是 David Walsh http://davidwalsh.name/cdn-fonts 的修复。

至于 font-family: 你可以使用任何你喜欢的名字。

Webfonts：为什么我的字体没有显示？

Webfonts: Why aren't my fonts showing?

css

webfonts

font-face