@ font-face를 사용하여 여러 사용자 정의 글꼴을 사용 하시겠습니까?

Question

나는 정말로 진실 된 뭔가를 놓치고 있다고 확신합니다. 나는 그것을 사용하지만 다른 사용자 정의 글꼴을 추가하려면 어떻게해야합니까 때

@font-face { 
    font-family: CustomFont; 
    src: url('CustomFont.ttf'); 
} 

모두 잘 작동 : 일반 글꼴과 단일 사용자 정의 글꼴을 사용하고? 다음 글꼴을 쉼표로 구분하거나 다른 글꼴을 추가하려고했지만 두 번째 글꼴을 사용할 수 없습니다.

Answer 1

당신은 단순히 다른 @font-face 규칙 추가, 브라우저 캐시가 행동하는, 당신이 올바르게 서체 이름과 파일 이름을 철자하고 있는지 확인,

이

@font-face { 
    font-family: CustomFont; 
    src: url('CustomFont.ttf'); 
} 

@font-face { 
    font-family: CustomFont2; 
    src: url('CustomFont2.ttf'); 
} 

두 번째 글꼴이 여전히 작동하지 않으면 당신의 운영 체제는 같은 이름의 글꼴로 어지럽히 지 않습니다.

Answer 2

체크 아웃 fontsquirrel. 그들은 웹 폰트 제너레이터를 가지고 있으며 폰트에 맞는 스타일 시트를 뱉어 낼 것입니다 ("@ font-face kit"를 찾으십시오). 이 스타일 시트는 독자적으로 포함하거나 템플릿으로 사용할 수 있습니다.

Answer 3

여러 글꼴을 아주 쉽게 사용할 수 있습니다. 다음은 내가 과거에 사용한 방법의 예입니다 :

<!--[if (IE)]><!--> 
    <style type="text/css" media="screen"> 
     @font-face { 
      font-family: "Century Schoolbook"; 
      src: url(/fonts/century-schoolbook.eot); 
     } 
     @font-face { 
      font-family: "Chalkduster"; 
      src: url(/fonts/chalkduster.eot); 
     } 
    </style> 
<!--<![endif]--> 
<!--[if !(IE)]><!--> 
    <style type="text/css" media="screen"> 
     @font-face { 
      font-family: "Century Schoolbook"; 
      src: url(/fonts/century-schoolbook.ttf); 
     } 
     @font-face { 
      font-family: "Chalkduster"; 
      src: url(/fonts/chalkduster.ttf); 
     } 
    </style> 
<!--<![endif]--> 

다른 브라우저에서 글꼴이 재미있을 수 있습니다. 이전 브라우저의 글꼴 얼굴은 작동하지만 ttf 대신 eot 파일을 사용해야합니다.

그래서 HTML 파일의 머리 부분에 내 글꼴을 포함 시켜서 조건부 IE 태그를 사용하여 eot 또는 ttf 파일을 사용할 수 있습니다.

이 목적으로 ttf를 변환해야하는 경우 무료 온라인으로이 작업을 수행 할 수있는 훌륭한 웹 사이트가 있습니다 (http://ttf2eot.sebastiankippe.com/ 참조).

희망이 있습니다.

Answer 4

글꼴 작업에 문제가있는 경우 이전에도이 문제가 발생했으며 발견 된 문제는 font-family : 이름으로 내려갔습니다. 이것은 실제로 주어진 글꼴 이름과 일치해야합니다.

가장 쉬운 방법은 글꼴을 설치하고 표시 이름이 무엇인지 확인하는 것입니다.

예를 들어 한 프로젝트에서 Gill Sans를 사용했지만 실제 글꼴은 Gill Sans MT라고했습니다. 격차와 capitlisation도 옳게하는 것이 중요했습니다.

희망이 있습니다.

Answer 5

내가 지금 일하고, 나는 그것을 밖으로 시도 할 때 나는 작은 구문 오류를 만들고 있었다 밝혀 내 CSS 파일

@font-face { 
    font-family: FontName1; 
    src: url("fontname1.eot"); /* IE */ 
    src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */ 
} 
@font-face { 
    font-family: FontName2; 
    src: url("fontname1.eot"); /* IE */ 
    src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */ 
} 
@font-face { 
    font-family: FontName3; 
    src: url("fontname1.eot"); /* IE */ 
    src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */ 
}