@ font-face가 작동하지 않습니다.

Question

@font-face 규칙을 사용하기 위해 글꼴 inlove-light-wf.ttf을 다운로드했습니다.

내 폴더에 home.html과 inlove-light-wf.ttf이 있습니다.

@font-face { 
    font-family: 'Inlove'; 
    src: url('inlove-light-wf.ttf'); 
    font-weight: normal; 
    font-style: normal; 
} 

#definicao{ 
    text-align:center; 
    color:#0080C0; 
    font-family:'Inlove'; 
    font-size:24px; 
    margin-top:20px; 
    border-top:solid #999 thin; 
    padding: 20px 40px 3px 40px; 
    height:290px; 
    background-color:#EFEFEF; 
} 

#definicao{ 
    text-align:center; 
    color:#0080C0; 
    font-family:'Inlove'; 
    font-size:24px; 
    margin-top:20px; 
    border-top:solid #999 thin; 
    padding: 20px 40px 3px 40px; 
    height:290px; 
    background-color:#EFEFEF; 
} 

을하지만 그것은 작동하지 않습니다 내 CSS에서

나는 있습니다.

Answer 1

css가 루트 폴더에없는 별도의 파일에있는 경우 문제의 원인 중 하나가 될 수 있습니다. 예를 들어 모든 css 파일을 'css'폴더에 보관하는 경우 글꼴 URL을 루트 폴더가 아닌 해당 파일에 상대적으로 수정해야합니다. 이 예에서는 src: url('../inlove-light-wf.ttf');

입니다. 또한 모든 브라우저가 .ttf 글꼴 파일을 사용할 수있는 것은 아닙니다. 대체 글꼴 형식을 @font-face css에 선언해야합니다.

시작하기 위해 수정 된 @font-face 선언이 있습니다. 나는 또한 here과 here을 더 읽는 것이 좋습니다.

@font-face { 
    font-family: 'Inlove'; 
    src: url('inlove-light-wf.eot'); /* IE9 Compat Modes */ 
    src: url('inlove-light-wf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('inlove-light-wf.woff') format('woff'), /* Modern Browsers */ 
     url('inlove-light-wf.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('inlove-light-wf.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Answer 2

일반적으로 @font-face 규칙은 일부 구형 브라우저를 지원하지 않습니다. 나는 보통 font-face 생성기를 사용하여 포함해야하는 글꼴에서 CSS 파일을 생성하고 모든 브라우저에서 올바르게 표시합니다.

Answer 3

글꼴에도 문제가있었습니다. IE에서 폰트가 아이폰에 없었을 때, 아이폰에서 일하는 것이 IE에 없었을 때. 여기 내 코드입니다 (이이 방식으로 작동하는 이유는 모르겠지만, 나를 위해 수행) :

@font-face{ 
 
\t font-family:"Royal Chicken"; 
 
\t src: url(../gradivo/font/RoyaChicken.eot); 
 
     src: url(../gradivo/font/RoyalChicken.ttf) format("truetype"), /* Safari, Android, iOS */ 
 
\t  url(../gradivo/font/RoyalChicken.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */ 
 
      url(../gradivo/font/RoyalChicken.woff) format("woff"), /* Pretty Modern Browsers */ 
 
      url(../gradivo/font/RoyalChicken.svg#RoyalChicken) format("svg"); 
 
} 
 
@font-face{ 
 
\t font-family:"Royal Chicken"; 
 
\t src: url(../gradivo/font/RoyaChicken.eot); 
 
} 
 
@font-face{ 
 
\t font-family:"Royal Chicken"; 
 
     src: url(../gradivo/font/RoyalChicken.ttf) format("truetype"); 
 
}

그것은 당신을 도울 수 있습니다. :)