Question

已经尝试了一段时间，我已经完成了

<style> 
@font-family {
 font-family: 'bebas';
 src: url( monthly.square7.ch/bebas/bebas.ttf; } 

span {
font-family: bebas ;
}
</style>
<span> hello </span>

<style>
@font-face {
font-family: bebas;
src: url(monthly.bplaced.net/bebas/bebas.ttf);
}
</style>

<div style="font-family: bebas;">
Bebas font test
</div>

和内联显然不会工作

---字体位于http://monthly.square7.net/bebas/bebas.ttf

我之前也问过，但没有运气。 Does anyone know how to embed ttf fonts in website

Answer 1

假设来自your previous post的信息以及您的CSS位于monthly.co.vu，您就会遇到Cross-Origin Resource Sharing个问题。

您的浏览器控制台可能会出现以下错误：

重定向原点＆＃39; http://monthly.square7.ch＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://monthly.co.vu＆＃39;因此不允许访问。

您的字体是从与您的网页不同的域提供的，因此您需要使用TTF提供以下标题：

Access-Control-Allow-Origin: monthly.co.vu

然后您的字体可以嵌入页面中。

或者，您只需将字体托管在与您正在访问的网页相同的域中，并避免出现这些问题。

Answer 2

您遇到了一些代码问题，请尝试以下方法：

@font-face{ 
	 font-family: 'bebas';
	 src: url('http://monthly.square7.ch/bebas/bebas.ttf');
    
}


span {
     font-family: 'bebas', Arial, sans-serif;

}

<span> hello </span>

Answer 3

我建议使用数据URI 的替代方法，因为您不会处理跨域请求（如果之前是问题），这应该最有效。请注意，如果数据未兑现，您将在每次重新加载页面时发送更多数据。

将字体转换为数据字符串here并将其直接粘贴到@ font-face中。有关详细信息，请参阅this post

src: url('data:font/ttf;base64,"DATA STRING GOES HERE WITHOUT QUOTES"')

嵌入TTF字体@ Font-face

3 个答案: