Wie füge ich fonts in CSS ein?

Ich möchte einige fonts verwenden, und ich möchte, dass es funktioniert, ohne diese Schriftart auf dem Clientcomputer zu haben. Ich habe das getan, aber nicht funktioniert:

@font-face { font-family: EntezareZohoor2; src: url(Entezar2.ttf) format("truetype"); } .EntezarFont{ font-family: EntezareZohoor2, B Nazanin, Tahoma !important; } 

Die folgenden Zeilen werden verwendet, um eine Schriftart in CSS zu definieren

 @font-face { font-family: 'EntezareZohoor2'; src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg'); font-weight: normal; font-style: normal; } 

Folgende Zeilen zum Definieren / Verwenden der Schriftart in CSS

 #newfont{ font-family:'EntezareZohoor2'; } 

Eine der besten Informationsquellen zu diesem Thema ist Paul Irishs Artikel Bulletproof @ font-face syntax .

Lesen Sie es und Sie werden mit etwas enden wie:

 /* definition */ @font-face { font-family: EntezareZohoor2; src: url('fonts/EntezareZohoor2.eot'); src: url('fonts/EntezareZohoor2.eot?') format('☺'), url('fonts/EntezareZohoor2.woff') format('woff'), url('fonts/EntezareZohoor2.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* use */ body { font-family: EntezareZohoor2, Tahoma, serif; } 

Gehen Sie durch http://www.w3.org/TR/css3-fonts/

Versuche dies:

  @font-face { font-family: 'EntezareZohoor2'; src: url('EntezareZohoor2.eot'); src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg'); font-weight: normal; font-style: normal; } 

Versuchen Sie diesen link1 , link2

 @font-face { font-family: 'RieslingRegular'; src: url('fonts/riesling.eot'); src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype'); } 

Ich habe Atatürks Schriftart so benutzt. Ich habe die “TTF” Version nicht benutzt. Ich übersetzte die originale Font-Version (“otf” -Version) in “eot” und “woof” -Version. Dann funktioniert es lokal, funktioniert aber nicht, wenn ich die Dateien auf den Server hochgeladen habe. Also habe ich die “TTF” Version auch so hinzugefügt. Jetzt arbeitet es an Chrome und Firefox, aber Internet Explorer verteidigt sich noch. Wenn Sie auf Ihrem Computer “Ataturk” -Schriftart installiert haben, dann funktioniert IE auch. Aber ich wollte diese Schriftart verwenden, ohne sie zu installieren.

 @font-face { font-family: 'Ataturk'; font-style: normal; font-weight: normal; src: url('font/ataturk.eot'); src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'), url('font/ataturk.woff') format('woff'); } 

Sie können es auf meiner Website hier sehen: http://www.canotur.com

Als ich zu Google Fonts ging, gaben sie mir nur True Type Font-Dateien .ttf und erklärten überhaupt nicht, wie man das @ font-face benutzt, um sie in mein Dokument aufzunehmen. Ich habe auch den Web-Font-Generator von Font Squirrel ausprobiert, der das Lade-GIF einfach laufen ließ und nicht funktionierte … Ich habe dann diese Seite gefunden –

https://transfonter.org/

Ich hatte großen Erfolg mit der folgenden Methode:

Ich wählte die Schaltfläche ” fonts hinzufügen”, ließ die Standardoptionen zu, fügte alle meine .ttf , die Google mir für Open Sans (das war wie 10, ich wählte eine Menge Optionen …).

Dann habe ich die Schaltfläche ” Konvertieren” ausgewählt.

Heres der beste Teil!

Sie gaben mir eine ZIP-Datei mit allen Schriftformat-Dateien, die ich ausgewählt habe, .ttf , .woff und .eot . Innerhalb dieser Zip-Datei hatten sie eine demo.html Datei, die ich einfach doppelt angeklickt hatte und es öffnete eine Webseite in meinem Browser, die mir Beispielverwendungen der verschiedenen CSS-Font-Optionen zeigte, wie man sie implementiert und wie sie aussahen .

@font-face

Ich wusste zu diesem Zeitpunkt noch nicht, wie ich die fonts mit @font-face richtig in mein Stylesheet demo.html aber dann stellte ich fest, dass diese demo.html mit einem eigenen Stylesheet in der Zip- demo.html kam. Ich habe das Stylesheet geöffnet und gezeigt, wie man alle fonts mit @font-face so dass ich es schnell und einfach kopieren konnte, um es in mein Projekt einzufügen –

 @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-LightItalic.eot'); src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBold.eot'); src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Regular.eot'); src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Light.eot'); src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Italic.eot'); src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot'); src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Bold.eot'); src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } 

Die demo.html auch ein eigenes Inline-Stylesheet, das interessant zu betrachten war, obwohl ich vertraut bin mit der Arbeit mit Schriftgewichten und -stilen, sobald sie enthalten sind, also brauchte ich nicht viel. Für ein Beispiel, wie man einen Schriftstil auf ein HTML-Element zu Referenzzwecken implementiert, könnte man die folgende Methode in einem ähnlichen Fall verwenden, nachdem @font-face korrekt verwendet wurde –

 html, body{ margin: 0; font-family: 'Open Sans'; } .banner h1{ font-size: 43px; font-weight: 700; } .banner p{ font-size: 24px; font-weight: 300; font-style: italic; }