CSS 스타일 시트 및 사용자 정의 글꼴

Question

좋아, 나는 CSS 초보자입니다. 템플릿에 스타일 시트가 있습니다.

head {font-family : Verdana; 글꼴 크기 : 16px; color : # 000000;}
body {font-family : Verdana; 글꼴 크기 : 12px; 색상 : #ffffff}
a {색상 : # ff0000; font-family : Verdana; font-size : 30px;}
bluetext {color : # 0000ff;}
툴팁 {font-family : Verdana; 글꼴 크기 : 11px; 색상 : #ffffff;}

그래서 나는이 섹션들 각각에 대해 글꼴이 무엇인지 판단하고 있습니다. 이 모든 섹션에 Verdana 대신 사용자 정의 글꼴을 사용하려면 어떻게해야합니까? 나는 .ttf 파일을 가지고 있지만, 그 밖의 무엇을 해야할지 모르겠습니다.

미리 감사드립니다.

Answer 1

당신은 당신의 CSS 파일에이를 사용해야합니다

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

IE에서 작동하기 위해, 당신은 .eot 확장자를 가진 글꼴의 다른 버전을 내 보내야하고, 또 다른 SRC 속성을 추가 할 수 있습니다.

편집 : http://www.webistrate.com/css3-custom-fonts-using-font-face/

Answer 2

당신은 그것을 위해 글꼴 얼굴을 사용해야합니다 : 여기에 @ font-face를 사용에 대한 유용한 링크입니다. 기본 구현은 다음과 같습니다.

그런 다음 다른 스타일 규칙의 다른 글꼴처럼 사용하십시오.

p { 
    font-family: CustomFontName, Helvetica, Arial, sans-serif; 
} 

Answer 3

우선 그래서, 당신은 http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/에서 생성 할 수있는 등 IE에 대한 모질라 woff, eot 같은 모든 브라우저의 글꼴을 생성합니다. 그런 다음 @font-face을 CSS에 작성하십시오.

@font-face { 
    font-family: 'font'; 
    src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype'); 
} 
body{ 
    font-family: 'font'; 
    color:#fff; 
font-size:12px; 
} 
.head {font-size:16px; color:#000000;} 
a {color:#ff0000; font-size:30px;} 
.bluetext {color:#0000ff;} 
.tooltip{font-size:11px;} 

Answer 4

먼저이 글꼴을 server/system/root에 설치하십시오.

&는

@font-face { 
     font-family: 'myriadproregular'(i.e.custom font name); 
     src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype"); 
    } 
    and if you want more than one font you can do the same 
    @font-face { 
     font-family: 'myriadprocond'; 
     src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype"); 
    } 
    @font-face { 
     font-family: 'myriadprosemibold'; 
     src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype"); 
    } 

은 당신이의 같은

같은

p 
{ 
font-family:"custom font name" 

}