嵌入TTF字体@字体

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

我之前也问过，但没有运气。有人知道如何在网站中嵌入ttf字体吗？

Answer 1

假设来自你以前的职位的信息，以及您的CSS位于monthly.co.vu上，您将遇到跨源资源共享问题。

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

从原点重定向“http://monthly.square7.ch”已被跨源资源共享策略阻止加载:请求的资源上没有“访问控制-允许-原产地”标题。因此，“http://monthly.co.vu”源是不允许访问的。

您的字体来自与您的页面不同的域，因此您需要使用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的替代方法，因为您不会处理跨域请求(如果这是前面的问题)，所以它肯定能工作。请注意，如果数据未兑现，您将在每个页面重新加载上发送更多的数据。

将字体转换为数据字符串这里并将其直接粘贴到@字体面板中。有关更多细节，请参见这个职位

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