CSS : 특정 ttf 글꼴의 기능을 알려주는 방법은 무엇입니까?

Question

웹 응용 프로그램에서 사용하고 싶은 임의의 ttf 글꼴이 있습니다.

"bold", "italic"과 같은 특성을이 글꼴에서 사용할 수있는 방법을 어떻게 알 수 있습니까?

배경 : 내 웹 사이트에 글꼴의 모양에 영향을 어느보기 위해

font-weight: bold; 
font-style: italic; 

: 나는 같은 모든 다른 설정을 시도한다는 것을 피하려고.

Answer 1

각 글꼴 (사용 가능한 가중치)은 각 글꼴의 모든 무게에 대해 별도의 참 유형 파일로 제공됩니다.

Roboto.ttf 
Roboto-Italic.ttf 
Roboto-Bold.ttf 

따라서, 당신은 당신의 CSS 파일에있는과 같이 인 지정해야합니다 : 윈도우에 두 번 직접 클릭하여

귀하의 경우에는

@font-face { 
    font-family: 'Roboto'; 
    font-weight: normal; 
    url('fonts/Roboto.ttf') format('truetype')/*ttf*/; 
} 

@font-face { 
    font-family: 'Roboto'; 
    font-weight: bold; 
    url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/; 
} 

@font-face { 
    font-family: 'Roboto'; 
    font-weight: lighter; 
    font-style: italic; 
    url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/; 
} 

, 당신은 특정 파일을 볼 수 있습니다/MacOS/Linux 탐험가.

타사 소프트웨어 솔루션을 사용하려는 경우 opentype.js을 사용하는 것이 좋습니다.

Answer 2

내가 그 생각을 짧게 줄이자. 그게 실제로 ttf (또는 실제로, 모든) 글꼴 리소스가 작동하는 것이 아닙니다. 굵게, 기울임 꼴 등은 하드 디스크에 별도의 "실제"파일이며, Office 응용 프로그램, 텍스트 편집기 등에서 볼 수있는 스타일 토글 링은 OS에서 가져온 것입니다. 추상화를 보여 주며 폰트 패밀리 이름, 개별 ttf 또는 otf 파일 목록이 아닌 스타일 및 무게 UI 컨트롤을 보여줍니다. 사용자가 눈치 채지 않고도 한 글꼴에서 다른 글꼴로 실제 글꼴 리소스를 전환 할 수 있습니다.

그래서 ttf 파일이 하나있는 경우이 파일은 하나의 특정 글꼴 얼굴 표현식 (일반, 굵게, 기울임 꼴, 굵게 기울임 꼴 또는 OpenType 메타 데이터 속성을 기반으로 더욱 자세한 정보)을 나타냅니다.

더 재미있게 만들기 : CSS에서 글꼴을 사용하려면 은에 특정 글꼴 자원이 무엇인지에 대해 신경 쓰지 않습니다. 그것은 당신에게 전적으로 의존하여 거짓말을합니다 : CSS는 당신을 믿을 것입니다. 당신이 @font-face 규칙을 사용하는 경우는 font-* 속성의 특정 조합에 사용할 글꼴 파일 말을 얻을, 그래서 당신은 운전 좌석에있어 : ​​

@font-face { 
    font-family: MyFont; 
    /* CSS has no idea, nor does it care, what this font "really" is */ 
    src: url('myfont-Bold-Italic.ttf') format("truetype"); 
    /* so we tell it this font is applicable to weight:100, or ultra-thin */ 
    font-weight: 100; 
    /* and we also tell it that this font is applicable in "normal" style */ 
    font-style: normal; 
} 

그리고 프레스토, 지금까지와 같은 페이지 스타일링 당신이 단지를 정의 된대로 MyFont을 일반 스타일 및 가중치 100으로 사용하면 ttf 리소스를로드해야합니다. CSS 엔진은 당신이 사용하도록 지시 한 리소스가 실제로는 폰트 패밀리의 굵은 이탤릭 표현 인 것을 "신경 쓰지"않는다.이 알고있는 모든 당신이 그것을 이런 식으로 사용하는 것이 무슨 그래서이 글꼴은 weight:100/style:normal에 사용했던 말했다입니다 :

body { 
    font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */ 
} 

h1 { 
    weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */ 
}