嵌入 TTF 字体@Font-face

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, and that your CSS is on monthly.co.vu, you're running into Cross-Origin Resource Sharing 个问题的信息。

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

Redirect at origin 'http://monthly.square7.ch' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://monthly.co.vu' is therefore not allowed access.

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

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

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

将字体转换为数据字符串here and paste it directly into @font-face. See this post了解更多详情

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

嵌入 TTF 字体@Font-face

Embedding TTF Font @Font-face

html

css

fonts

embed

truetype