Question

我使用font-face，但它无效。我在内部CSS中使用了以下代码：

@font-face {
font-family: acme;
src: url(https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf);
}

我的HTML代码如下：

<p style="text-align:center; font-family: acme; font-size:28px; color: #4D4B4B;">TYPICAL MEETING ROOM</p>

当我在本地使用它时它工作正常，但是当将字体上传到服务器时，当我从服务器获取字体时，它不会工作。请有人为此提供解决方案。

Answer 1

从该Amazon S3 URL检索字体会导致下面出现CORS错误。请注意，null就在那里，因为我正在从堆栈代码段进行测试。在您的情况下，它很可能会被您的域名替换。

访问字体＆＃39; https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf＆＃39; 来自起源＆＃39; null＆＃39;被CORS政策阻止：没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; null＆＃39;因此不允许访问。

为了能够检索您的字体，您需要在S3存储桶上配置跨源资源共享，如Amazon S3文档中的here所述。

以下配置允许对所有来源的GET请求（可能过于自由，取决于您的存储桶的内容）：

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Answer 2

使用此代码。它应该完美地运作

＆＃13;

@font-face {
  font-family: 'acme';
  src: url('https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf');  
}

＆＃13;

<p style="text-align:center; font-family: 'acme', arial; font-size:28px; color: #4D4B4B;">TYPICAL MEETING ROOM</p>

＆＃13;

字体表面不在本地而不是在服务器中工作

2 个答案: