서버에서 로컬이 아닌 서버에서 글꼴이 작동하지 않습니다.

Question

font-face을 사용했는데 작동하지 않습니다.

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

내 HTML 코드는 다음과 같습니다 : 저는 내부 CSS에 다음 코드를 사용 나는 지역이을 사용하는 경우는 잘 작동하지만

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

서버와 때가 글꼴을 업로드 할 때 작동하지 않을 서버에서 글꼴을 가져옵니다. 누구든지이 문제에 대한 해결책을주십시오.

Answer 1

이 코드를 사용하십시오. 그것은 완벽

@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

그에서 글꼴을 가져 작동합니다 아래 CORS 오류 아마존 S3의 URL 결과. null은 스택 스 니펫에서 테스트 중이므로 그냥 있습니다. 귀하의 경우에는 귀하의 도메인으로 대체 될 가능성이 큽니다. 기원 '널 (null)'에서 'https://s3.ap-south-1.amazonaws.com/mailer-reach-on-time/ACMESecretAgentBB_BoldItal.otf' 에서 글꼴을

이

액세스는 CORS 정책에 의해 차단되었습니다 : 없음 '액세스 - 제어 - 허용 - 원산지'헤더는 요청 자원에 존재합니다. 따라서 원본 'null'은 액세스가 허용되지 않습니다.

글꼴을 검색하려면 Amazon S3 설명서의 here에 설명 된대로 S3 버킷에서 원본 교차 리소스 공유를 구성해야합니다.

다음 구성은 모든 기원에 요청을 (당신의 버킷의 내용에 따라, 너무 진보적 ​​일 수 있음) GET 수 있습니다 :

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