@ font-face funktioniert manchmal manchmal und nicht in anderen Zeiten?

Question

Ich habe ein Problem mit @ Font-Face-Regel in meinem CSS. In einigen Stylesheets funktioniert es perfekt in anderen funktioniert es überhaupt nicht ...

Wie Sie im Snippet sehen können, verwende ich eine externe Datei für meine Schriftart, aber in diesem speziellen Fall funktioniert es nicht ...

Irgendwelche Gedanken jemand?

Endlose Dankbarkeit wird Ihr Anteil sein :)

@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

Chancen sind es die Schrift ist, wie man wirklich ein WebFont Kit erstellen müssen und verschiedene Schriftarten Dateitypen verwenden:

Zum Beispiel:

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

Sie sollten einen WebFont Generator wie verwenden: https://www.fontsquirrel.com/tools/webfont-generator

(offensichtlich eine Lizenz haben müssen einige Schriftarten verwenden als Webfonts so das am besten jede vor der Konvertierung zu überprüfen.)

Answer 2

für Browser-Kompatibilität müssen Sie verwenden diese Regel.

/* 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; 
} 

Sie müssen drei Formate (woff, eot, ttf) des FONT bekommen. Siehe die https://www.fontsquirrel.com/tools/webfont-generator Auf dieser Seite können Sie die Schriftart zu correcto Format konvertieren.

Erfolg!