@ font-face AwesomeFont funktioniert nicht

Ich habe durch die Suche Q & A vor dem Stellen meiner Frage gesucht, aber ich habe keine Antworten gefunden.@ font-face AwesomeFont funktioniert nicht

Für mein Projekt muss ich eine Website machen, sie gaben mir einen Ordner "Fonts" zum Download mit den benötigten Fonts, ich habe 2 Fonts, 'FontAwesome' und 'Glyphicons-Halblings' hier ist der Code, für den ich geschrieben habe diese Schriften:

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

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

dann habe ich versucht, meine Schriften zu verwenden:

header h1 
{ 
    font-family: 'FontAwesome'; 
}

Als ich versuchte, FontAwesome zu verwenden, änderte nichts, was die grundlegenden Schriften bleiben, ich habe auch versucht, meine zweite Schriftarten ‚glyphicons- zu verwenden Hallings-Regular 'und mit diesen Fonts bleiben die grundlegenden Fonts, aber es gibt mehr Platz b zwischen meinen Worten like this.

Hier ist ein screenshot meiner Schriftarten-Ordner, mein Stylesheet ist in meinem Ordner 1-Projet, so normalerweise gibt es kein Problem für die URL, habe ich auch mit jemandem versucht, die Schriftarten mit Google Link zu verwenden, aber es hat nicht funktioniert.

Weiß jemand woher das Problem kommt?

Quelle

2017-01-20 A.S

kleinen Hinweis auf Ihre CSS: Wir brauchen nicht alle diese Regel nicht mehr. Für alle modernen Browser, einschließlich IE9 und höher, alles, was Sie brauchen, ist WOFF (und die neuesten unterstützen WOFF2). Die anderen Formate sind für eine Weile obsolet (eot, svg) oder sind nicht für die Web-Bereitstellung gedacht (ttf, otf). Siehe [diese SO-Antwort] (http://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385) für weitere Details . Also: vereinfachen Sie Ihr CSS und schließen Sie eine Vielzahl möglicher Ursachen aus. Dann haben Sie ein besseres Problem zu analysieren. –

Ich würde einschließlich font-awesome mit Bibliothek CDN

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

dann Ihre eigene CSS-Klasse so etwas wie .FA hinzufügen, die nur font-family hat: FontAwesome

.fa { 
    font-family: FontAwesome; 
}

dann auf Ihrem Element können Sie die font-awesome-Klasse für das bestimmte Symbol, das Sie wollen, z. B.

012 hinzufügen

<h1 class="fa fa-check fa tick"></h1>

unten, wie wir mit zusätzlichen CSS für unsere .FA Klasse

Aber könnte wie unten

Font Super Icons mit HTML-Code angezeigt implementiert haben

== edit: Beispiel HTML für einfache Schriftart awesome Seite, sopy unten und speichern als.HTML-Datei und sehen, ob für Sie arbeiten als Ausgangspunkt ==

<!doctype html> 
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> 
<head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
     <style> 
     .fa { 
      font-family: "FontAwesome"; 
     } 
     </style> 
</head> 
<body> 
<h1 class="fa fa fa-check fa-tick">This is font awesome</h1> 
</body> 
</html>

Quelle

2017-01-20 23:08:11 mrjamesmyers

danke für deine Antwort, ich einen Fehler auf meinem Posten gemacht, sagte ich, dass ich verwende Google-Verbindung mit meinem Freund, aber es war der Bootstrap-Link Ich benutzte und es immer noch nicht funktioniert, ich habe auch versucht, diese Klasse zu verwenden, wie Sie sagten, und es hat nicht funktioniert, obwohl, wenn ich meine Seite Schriftart-Familie: 'FontAwesome'; erscheinen, ich habe auch versucht, font-family: FontAwesome, wie Sie sicher, dass das machen, wenn es kein Wunder ist lol, ich auch versucht, die Schrift auf etwas anderes zu benutzen als mein h1 aber es funktionierte noch nicht

bearbeiten Ich habe versucht, Ihren HTML-Code und ich konnte das Symbol vor der Schriftart angezeigt, aber es scheint, dass die Schriftart

Quelle

2017-01-20 23:50:52

Vielleicht überprüfen Sie das Netz-Panel, um sicherzustellen, dass es die CSS-Datei ordnungsgemäß lädt, auch wert, sicherzustellen, dass Sie keine anderen CSS haben, die Vorrang haben – mrjamesmyers

@ font-face AwesomeFont funktioniert nicht

Antwort

Verwandte Themen