맞춤 글꼴을 사용할 수 없습니다.

Question

맞춤 글꼴에 대한 도움이 필요합니다. 웬일인지 나는 그들에게 일하도록 할 수 없다. 나는 .css를 사용하고있다. 나는 필요한대로 다하고 있다고 확신한다. 여기에 .css 내 머리 링크입니다 :

<link rel=stylesheet type= "text/css" href= "main.css"> 

내 .CSS :

html, body { 
    padding-top: 2em; 
    text-align: left; 
    width: 50%; 
    margin: 0 auto; 
} 

@font-face { 
    font-family: 'Dudu_Calligraphy'; 
    src: url(fonts/Dudu_Calligraphy.tff); 
    font-style: normal; 
    font-weight: 100; 
} 

p { 
    font-family: Dudu_Calligraphy 
    font-weight= 100; 
} 

모두 .html 중에서, .CSS 및 글꼴을 하나 개의 폴더에 있고 난 단지에 적용 할 수 단락

Answer 1

처음에 약간 철자가 틀렸으므로 font-weight= 100;이 아니라 font-weight: 100;이어야합니다.

일부 브라우저는 하나의 유형을 지원하고 다른 유형은 다른 유형을 지원하기 때문에 웹에서 사용하려면 다중 형식 글꼴이 필요합니다.

필요한 형식 : TrueType, WOFF, EOT Compressed, SVG. 당신은 예를 들어,이 글꼴 생성기 사용할 수

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

글꼴의 다른 유형을 생성하려면 :

그리고 당신의 @font-face는 다음과 같이한다 https://www.fontsquirrel.com/tools/webfont-generator

을 그리고 당신의 글꼴을 올바르게 렌더링하지 않을 경우 모든 플랫폼에서 CSS 규칙을 시도해 볼 수 있습니다.

* { 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}