2014-09-04 5 views
0

사용자 정의 @font-face을 작동하는 데 문제가 있습니다. The <p>이 클래스 스타일은 Arial을 기본값으로 사용합니다. 여기서 뭐가 잘못 됐니?사용자 정의 글꼴이 작동하지 않습니다.

<style> 
.stonefont 
@font-face { 
    font-family: 'effrastdltwebfontwoff'; 
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot'); 
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot?#iefix'),  format('embedded-opentype'), 
    url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.woff') format('woff'), 
    url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.ttf') format('truetype'), 
    url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.svg#effrastdltwebfontwoff') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 

p{ 

font-family: "effrastdltwebfontwoff"; 
background:transparent; text-shadow: none; border-radius: 0; box-shadow: none; position:absolute;  font-size:18px;text-align:center; z-index:99; top:157px; left:64.5px; padding: 0 7px; overflow:hidden; color:black; margin:0; border:0;height:37px;width:184px;" 

} 
</style> 

Thanks 

답변

4

@ font-face 이전에 .stonefont을 제거하십시오. 어떤 글꼴이 작동하지 않는 원인이됩니다.

+0

이 문제는 해결되지 않았습니다. –

+0

요소에 글꼴을 어떻게 사용하고 있습니까 ?? –

+1

'p {font-family : "effrastdltwebfontwoff";}'하고 있니? – Aibrean

1

먼저 @ font-face 앞의 .stonefont를 제거하십시오.

로딩 오류가 발생한다고 언급 한 것처럼 외부 요청을하기보다는 글꼴 파일을 FTP로 업로드하는 것이 좋습니다.

CSS에서 글꼴 파일을 추가하는 것 외에도 p 요소에 글꼴을 사용하도록 지시해야합니다.

p {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;} 

을 (그러나 대체를 포함하는 기억) 또는 클래스처럼이 글꼴을 적용 할 경우, 다음 .stonefontp을 변경하고 해당 글꼴을 적용 할 모든 요소에 클래스를 추가해야합니다.

HTML : 다른 답변에 제안 (작은 따옴표를 참고) 스퓨리어스 .stonefont

.stonefont {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;} 
+0

아직 작동하지 않음 –

+0

페이지에서 요소를 검사 할 수 있습니까? 파일을로드하지 못하게하는 콘솔 오류가 발생하고 있습니까? – Lee

+0

한편 글꼴 패밀리 선언에 큰 따옴표를 사용하고 글꼴 얼굴에 작은 따옴표를 사용하고있는 것으로 나타났습니다. 둘 중 하나를 사용하고 다시 시도하십시오 – Lee

0

제거, 다음과 같은 오류 메시지가에서 볼 수있다 : CSS는

<p class='stonefont'>Some text</p> 

Firefox 콘솔 :

downloadable font: download failed (font-family: "effrastdltwebfontwoff" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed 
source: http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot 

이것은 사이트 간 액세스 문제입니다. 글꼴을 호스팅하는 서버의 관리자가 해결할 수 있지만 사이트 간 액세스를 허용하지 않는 정책이라고 가정하면 글꼴을 다운로드하고 글꼴 파일을 만들어 자신의 서버에 업로드해야합니다. 단, 글꼴 저작권 발표로 허용됩니다.

관련 문제