web-dev-qa-db-de.com

Wie baue ich Schriftarten in CSS ein?

Ich möchte einige Schriftarten verwenden, und ich möchte, dass sie funktioniert, ohne dass diese Schrift auf dem Clientcomputer vorhanden ist. Ich habe das gemacht, funktioniert aber nicht:

@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont{
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
42
Mohammad

Folgende 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';
}
50
Suresh kumar

Eine der besten Informationsquellen zu diesem Thema ist der Artikel Bulletproof @ font-face-Syntax von Paul Irish.

Lesen Sie es und Sie werden mit etwas wie enden:

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

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;
    }
5
RAN

Versuchen Sie diese link1 , link2

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

Als ich zu Google-Schriftarten ging, waren sie alle True Type-Schriftdateien .ttf und erklärten überhaupt nicht, wie sie das @ font-face verwenden, um sie in mein Dokument aufzunehmen. Ich habe auch den Web-Font-Generator aus Font-Eichhörnchen ausprobiert, der einfach das Ladegif lief und nicht funktionierte ... Ich fand dann diese Seite - 

https://transfonter.org/

Ich hatte großen Erfolg mit der folgenden Methode:

Ich wählte die Schaltfläche Add Fonts aus, ließ die Standardoptionen und fügte all meinen .ttf hinzu, den Google mir für Open Sans gegeben hatte (dies war wie bei 10, ich habe viele Optionen ausgewählt ...).

Dann habe ich die Schaltfläche Convert ausgewählt.

Hier ist das Beste!

Sie gaben mir eine ZIP-Datei mit allen von mir ausgewählten Schriftformatdateien, .ttf, .woff und .eot. In dieser Zip-Datei hatten sie eine demo.html-Datei, auf die ich gerade geklickt hatte. Sie öffnete eine Webseite in meinem Browser, in der mir Beispiele für die verschiedenen CSS-Schriftartoptionen, deren Implementierung und deren Aussehen usw. angezeigt werden.

@font-face

Ich wusste zu diesem Zeitpunkt noch nicht, wie ich die Schriften mit @font-face richtig in mein Stylesheet einfügen sollte, aber dann fiel mir auf, dass dieser demo.html mit einem eigenen Stylesheet in Zip geliefert wurde. Ich öffnete das Stylesheet und zeigte, wie man alle Schriften mit @font-face einbrachte, so dass ich schnell und einfach this in mein Projekt einfügen konnte.

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

Der demo.html hatte auch ein eigenes Inline-Stylesheet, das interessant war, einen Blick darauf zu werfen, obwohl ich mit der Arbeit mit Schriftgewichten und -stilen vertraut bin, sobald sie enthalten sind, also brauchte ich es nicht viel. Für ein Beispiel, wie Sie einen Schriftstil in ein HTML-Element zu Referenzzwecken implementieren, können Sie die folgende Methode in einem ähnlichen Fall wie meiner verwenden, nachdem @font-face ordnungsgemäß 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;
}
0
kiko carisse

Ich habe Ataturks Schrift so benutzt. Ich habe keine "TTF" -Version verwendet. Ich habe die ursprüngliche Schriftartversion ("otf" -Version) in die "eot" - und "woof" -Version übersetzt. Dann funktioniert es lokal, aber es funktioniert nicht, wenn ich die Dateien auf den Server hochlade. Dann habe ich die Version "TTF" hinzugefügt auch so Nun, es funktioniert auf Chrome und Firefox, aber Internet Explorer ist immer noch eine Verteidigungsmethode. Wenn Sie auf Ihrem Computer die Schrift "Ataturk" installiert haben, funktioniert auch IE. Aber ich wollte diese Schrift 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

0
Can OTUR