사용자 정의 글꼴이 올바르게 표시되지 않습니다.

내 웹 사이트에 사용자 정의 글꼴을로드하려고합니다. 내 style.css에서 나는 다음과 같은 속성을 선언했다.사용자 정의 글꼴이 올바르게 표시되지 않습니다.

@font-face { 
    font-family: billabong; 
    src: url('./fonts/billabong.ttf'); 
    font-weight: bold; 
} 

h1.header { 
    font-family: billabong; 
}

그리고 내 HTML에는 다음과 같은 코드가있다.

<h1 class="header">Welcome to</h1>

그러나 다른 글꼴 유형을 기본값으로 설정 한 것으로 보이므로 글꼴을 찾을 수 없다고 가정합니다.

글꼴이 내 css 파일의 한 디렉토리에 있고 글꼴이라는 폴더 안에 찾을 수있는 정확한 경로를 제공 했습니까? 이것이 문제가 아니라면 누구나 내가 뭘 잘못하고 있는지 알 수 있습니까?

출처

2014-09-23 Biscuit128

어쩌면 당신은 URL을 '../fonts/billabong.ttf' –

으로 변경할 수 있습니다. '../'는 "하나의 디렉토리"를 의미하고'. /'는 현재 디렉토리를 의미합니다. –

font-family 속성에 아포스트로피를 추가해보십시오.

font-family: 'billabong';

더 많은 형식을 사용하십시오. 모든 브라우저가 ttf를 지원하지는 않습니다. 은 여기에 대한 자세한 내용 : http://socialcompare.com/en/comparison/browser-fonts-support-comparison

당신은 TTF 여기 webfont을 수출 수 :

출처

2014-09-23 14:24:57 MoLow

실제로, ttf는 [모든 주요 브라우저에서 지원됩니다] (http://caniuse.com/#feat=ttf). –

나는 따옴표를 의미한다고 생각한다. 키보드에서 아포스트로피 역할을하지만 기술적으로는 이러한 유형의 값을 따옴표로 묶습니다. –

그 게시물은 2012 년부터, 2014 년부터 또 다른 좋은 것이 있어야합니다. –

http://www.font2web.com/ 내가 여기있는 유일한 문제는 디렉토리라고 생각합니다.

먼저 글꼴 파일을 html 파일과 동일한 디렉토리에 배치하십시오. 이 글꼴 무게를 두는 시도 작동하지 않으면

@font-face { 
    font-family: billabong; 
    src: url(billabong.ttf); 
    font-weight: bold; 
} 

h1.header { 
    font-family: billabong; 
}

그런 다음이 코드를 시도 대담한; 헤더 클래스에 도움이되는지 확인하십시오.

작동하는 경우 다시 원래 위치로 되돌립니다. 추측하기 싫지만 CSS 파일에 글꼴 파일이 있다는 것을 이해합니다. 귀하의 HTML 파일이 귀하의 CSS 파일보다 하나 높은 디렉토리라고 가정합니다. 이 경우 당신은 당신은 내가 정의 글꼴을 사용하여 많은 웹 사이트를 만든 및 호환성 등의 문제를 보지 못한 당신의 속성 또는 소스 URL에 아포스트로피를 사용할 필요가 없습니다

@font-face { 
    font-family: billabong; 
    src: url(css/fonts/billabong.ttf); 
    font-weight: bold; 
} 

h1.header { 
    font-family: billabong; 
}

을 말할 수있다. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

희망하는 데 도움이 : 난 항상 W3Schools의 웹 사이트를 참조하는 어떤 경우

그들은 그것에게 최선의 방법을 설명합니다.

출처

2014-09-23 14:37:18 Ali

사용자 정의 글꼴이 올바르게 표시되지 않습니다.

답변

관련 문제