css - Webfonts:为什么我的字体没有显示？

Question

字体可以正常工作，但样式表杂乱无章，静态 Assets 由应用程序服务器提供服务。当我将 Assets 移至 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 托管在不同域上的字体。浏览器不允许这样做。您必须在同一个域中托管这些字体并从那里声明您的路径。