Question

我无法让我的自定义@font-face正常工作。 <p>我将此类样式应用于默认为Arial。这里出了什么问题？

<style>
.stonefont
@font-face {
    font-family: 'effrastdltwebfontwoff';
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot');
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot?#iefix'),     format('embedded-opentype'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.woff') format('woff'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.ttf') format('truetype'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.svg#effrastdltwebfontwoff') format('svg');
font-weight: normal;
font-style: normal;

}

p{

font-family: "effrastdltwebfontwoff"; 
background:transparent; text-shadow: none; border-radius: 0; box-shadow: none; position:absolute;     font-size:18px;text-align:center; z-index:99; top:157px; left:64.5px; padding: 0 7px; overflow:hidden; color:black; margin:0; border:0;height:37px;width:184px;"

}
</style>

Thanks

Answer 1

在@ font-face之前移除.stonefont。这导致字体不起作用。

Answer 2

首先，在@ font-face之前删除.stonefont。

我建议您将字体文件上传到FTP而不是发出外部请求，正如您所提到的，您正在收到加载错误。

除了在CSS中添加字体文件外，还需要告诉p元素使用该字体。（但记得包括一个后备）

p {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;}

或者，如果您只想将此字体应用为类，请将p更改为.stonefont，并记住将该类添加到要应用该字体的任何元素。

HTML：

<p class='stonefont'>Some text</p>

CSS：（请注意单引号）

.stonefont {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;}

Answer 3

在其他答案中建议删除虚假.stonefont后，可以在Firefox控制台中看到以下错误消息：

downloadable font: download failed (font-family: "effrastdltwebfontwoff" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot

自定义字体表面不起作用

3 个答案: