@ font-faceは時々動作することがありますが、それ以外の時は動作しません。

Question

私のCSSで@ font-faceのルールに問題があります。 一部のスタイルシートでは、他のスタイルシートでは全く機能しません。

スニペットでわかるように、私はフォント用に外部ファイルを使用していますが、この特定のケースでは動作しません...

誰でも考えられますか？

無限の感謝の気持ちは、あなたの株:)

@charset "utf-8" 
 

 
@font-face { 
 
    font-family: sinhala; 
 
    src: url(fonts/Sinhala.ttc); 
 
} 
 

 
#wrapperportfolio4 { 
 
\t width: 45%; 
 
\t float:left; 
 
\t position:relative; 
 
\t margin-left: 5%; 
 
\t margin-top: -42.5%; 
 
\t box-shadow: 3px 5px 4px 0px black; 
 
\t height: 20vw; 
 
\t 
 
\t 
 
} 
 

 
#wrapper4trans { 
 
\t width: 45%; 
 
\t float:left; 
 
\t position:relative; 
 
\t margin-left: 5%; 
 
\t margin-top: -42.5%; 
 
\t background-color: black; 
 
\t opacity: 0.5; 
 
\t height: 20vw; 
 
} 
 

 
#box1title { 
 
\t width: 65%; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-top: 2%; 
 
\t text-align: center; 
 
} 
 

 

 

 
#box1img { 
 
\t width: 60%; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin-left: 2.5%; 
 
\t margin-top: 1.5%; 
 
\t 
 
} 
 

 
#box1txt{ 
 
\t width: 25%; 
 
\t position:relative; 
 
\t float:left; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t text-shadow: 0px 2px 4px rgba(0,0,0,0.50); 
 

 
} 
 

 
#box1txt2{ 
 
\t width: 25%; 
 
\t position:relative; 
 
\t float:left; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t text-shadow: 0px 2px 4px rgba(0,0,0,0.50); 
 
} 
 

 
#box1link { 
 
\t width: 25%; 
 
\t position:relative; 
 
\t float:left; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t text-shadow: 0px 2px 4px rgba(0,0,0,0.50); 
 
\t cursor: pointer; 
 
}

<div id="wrapperportfolio4"> 
 

 
\t <p id="box1title">www.pieterswebdesign.com</p> 
 

 
\t 
 

 
\t \t \t <img id="box1img" src="images/box1img.png" /> 
 

 
\t \t \t \t <p id="box1txt">Pieter's Web Design is een beginnende webdesigner gevestigd in Gent.</p> 
 

 
\t \t \t \t \t <p id="box1txt2">Voor betaalbare professionele websites is dit de ideale oplossing.</p> 
 

 
\t \t \t \t \t \t <a id="box1link" href="https://www.pieterswebdesign.com">www.pieterswebdesign.com</a> 
 
\t </div>

Answer 1

チャンスはあなたが本当にwebfontキットを作成して、さまざまなフォントファイルタイプを使用する必要があるとして、それは、フォントのあるされます。

例：

@font-face { 
    font-family: 'FontName'; 
    src: url('fontname-webfont.eot'); 
    src: url('fontname-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontname-webfont.woff2') format('woff2'), 
     url('fontname-webfont.woff') format('woff'), 
     url('fontname-webfont.ttf') format('truetype'), 
     url('fontname-webfont.svg') format('svg'); 
} 

あなたが好きwebfontジェネレータを使用する必要があります。 https://www.fontsquirrel.com/tools/webfont-generator

（明らかにあなたがいずれかを変換する前にこれをチェックするので、最高のwebfontsとして、いくつかのフォントを使用するためのライセンスを持っている必要があります。）

Answer 2

ブラウザの互換性のためにあなたが使用する必要がありますこのルール。

/* Fonts */ 
@font-face { 
    font-family: 'sinhala'; 
    src: url("./fonts/sinhala.eot"); 
    src: url("./fonts/sinhala.eot?#iefix") format('embedded-opentype'), 
     url("./fonts/sinhala.woff") format('woff'), 
     url("./fonts/sinhala.ttf") format('truetype'), 
     url("./fonts/sinhala.svg#montezregular") format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

FONTの3つのフォーマット（woff、eot、ttf）を取得する必要があります。 https://www.fontsquirrel.com/tools/webfont-generatorを参照 このページでは、フォントを正しい形式に変換できます。

Succes！