CSS : @ font-face 가져 오기가 작동하지 않습니다.

Question

어떻게 작동하는지 이해할 수 없지만 도움이 될 것입니다. 그것은 인포 얻을

@font-face { 
font-family: "JSL"; 
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype"); 
} 

font { 
color: #000000; 
font-size: 120%; 
font-family: "JSL"; 
} 

Answer 1

더하기 기호 (내 이름이 바뀐 글꼴로 테스트 됨) 나 주 CSS 파일의 맨 위에 별도의 CSS 파일을 가져올 필요가 없습니다.

그러나 실제 유형 이외의 다른 글꼴 버전이 필요할 수도 있습니다. Bulletproof @font-face Syntax을 살펴보십시오.

이 작업을 수행하려면 FontSquirrel’s generator을 사용할 수 있습니다.

다음은 내 응용 프로그램에 포함 된 @font-face의 예이며, 주요 CSS 스타일 시트 맨 위에 고정되어 있습니다.

@font-face { 
    font-family: 'JustVector'; 
    src: url('../fonts/justvectorv2+webfont.eot'); 
    src: url('../fonts/justvectorv2+webfont.eot?') format('eot'), 
     url('../fonts/justvectorv2+webfont.woff') format('woff'), 
     url('../fonts/justvectorv2+webfont.ttf') format('truetype'), 
     url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 2

없는

@font-face 

시도 내있는 style.css에서 http://alistapart.com/article/cssatten

:

을

나는이 웹 사이트에서 뭐가 떨어져거야

@import_your_new_cssfile.css 

넣었습니까?

font-face { 
font-family: "JSL"; 
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype"); 
} 

font { 
color: #000000; 
font-size: 120%; 
font-family: "JSL"; 
} 

Answer 3

글꼴 URL의 "+"기호에 문제가 있습니까? URL 인코딩을 원할 수 있습니다.

편집 - 글꼴 URL을 누른 후 ttf 파일을 다운로드하고 원격 소스가 아닌 로컬로 참조해야합니다. 파일을 다운로드하기 위해 Captcha를 요청하는 메시지가 표시됩니다. 이는 아마도 작동하지 않는 이유 일 것입니다.

Answer 4

파일을 다운로드하고 로컬에서 참조해야합니다. 다운로드 링크가 있으며 지원되는 링크가 있으므로 다운로드가 필요합니다. 즉, TTF 파일로 직접 연결되는 링크가 아닙니다.

Answer 5

글꼴에 따라 사용해야 할 수도 있습니다

@font-face { 
font-family: 'someFont'; 
src: url('path/to/font/someFont.eot'); 
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'), 
    url('path/to/font/someFont.woff'), format('woff'), 
    url('path/to/font/someFont.ttf'), format('truetype'), 
    url('path/to/font/someFont.svg'), format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

및 CSS에를 : 나는 정의 글꼴을 내장 wityh 문제가있을 때

BODY 
{ 
    font-family: 'someFont', Fallback, sans-serif; 
    font-size: 12px; 
    ... 
} 

이 나를 위해 일했다.