サーバーではないローカルでフォントが動作しない

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> 

私は地元でこれを使用すると、それが正常に動作しますが、ときにサーバーにフォントをアップロードしたときにIそれは動作しませんサーバーからフォントを取得します。誰でもこのための解決策を教えてください。

Answer 1

このコードを使用してください。それは以下のCORSエラーでそのアマゾンS3のURL結果からフォントを取得、完全

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

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

Answer 2

を動作するはずです。私がスタックスニペットからテストしているので、nullがそこにあることに注意してください。あなたのケースでは、おそらくあなたのドメインに置き換えられます。

原点から 「https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf」でフォントへのアクセス 「NULL」がCORSポリシーによってブロックされている：いいえ 「アクセス制御 - 許可原点」ヘッダは、要求された 資源上に存在します。したがって、原点「ヌル」はアクセスが許可されません。

あなたのフォントを取得できるようにするには、Amazon S3のドキュメントのhereに記載されているS3バケットのクロスオリジンリソース共有を設定する必要があります。

次の設定では、（あなたのバケットの内容によっては、あまりにもリベラルであるかもしれない、）全ての起源に要求をGETできます

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