Font-Face funktioniert auf lokaler, aber nicht auf dem Server

Question

wie der Titel sagen Schriftart-Gesicht funktioniert nicht im Internet, aber es funktioniert auf lokaler, ich verstehe nicht warum. Kann mir jemand helfen ? Hier ist mein Code:

@font-face { font-family: 'ocraextended'; src: url('font/OCRAEXT.ttf') format('truetype'); }

Answer 1

Wenn Sie die Schrift auf Ihrem PC oder Mac installiert haben wäre es in Ihrem Browser angezeigt werden, aber nicht auf Systeme, bei denen es nicht installiert ist. Sie müssen die verschiedenen Font-Dateien mit Ihrer Webseite hochladen und auf diese Font-Dateien in der CSS verweisen.

Beispiel:

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('font/OCRAEXT.eot'); /* IE9 Compat Modes */ 
    src: url('font/OCRAEXT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('font/OCRAEXT.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('font/OCRAEXT.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('font/OCRAEXT.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('font/OCRAEXT.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Eine weitere Option ist Google-Schriften zu verwenden. Es ist kostenlos und einfach zu bedienen (Cross-Browser-kompatibel, ohne viele Dateien und Schriftformate):

In HTML

<link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet"> 

oder In CSS

@import url('https://fonts.googleapis.com/css?family=Overpass+Mono'); 

Dann Sie machen html-Element verwenden, um die Schriftart wie folgt aus:

h1 {font-family: 'Overpass Mono', monospace;} 

PS: Monospaced-Schriften sind ursprünglich maschinenlesbar. Es ist nicht die beste lesbare Schrift. Aber hey, du weißt am besten, was zu deinem Design passt.