カスタムフォントが使えません

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の、およびフォントの両方を1つのフォルダにあると私はちょうどそれらを適用することはできません段落

Answer 1

まず、スペルミスが少しあります。font-weight: 100;で、font-weight= 100;ではありません。

Webで使用するには、マルチフォーマットフォントが必要です。一部のブラウザでは1つのタイプがサポートされているため、別のタイプをサポートするブラウザもあります。

必要な形式：TrueType、WOFF、EOT Compressed、SVG。

そして、あなたの@font-faceは次のようになります。https://www.fontsquirrel.com/tools/webfont-generator

そして、あなたのフォントが適切にレンダリングされません場合：フォントの種類を生成するには

@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'); 
} 

、あなたが例えばこのフォントジェネレータを使用することができますすべてのプラットフォームで、このCSSルールを試すことができます：

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