Wie installiere ich eine benutzerdefinierte Schriftart auf einer HTML-Site?

153

Ich verwende weder Flash noch PHP - und wurde gebeten, einem einfachen HTML-Layout eine benutzerdefinierte Schriftart hinzuzufügen. "KG June Bug"

Ich habe es lokal heruntergeladen - gibt es einen einfachen CSS-Trick, um dies zu erreichen?

html css fonts webfonts Adam
quelle

Antworten:

276

Ja, Sie können die CSS-Funktion @ font-face verwenden. Es wurde nur in CSS3 offiziell genehmigt, aber in CSS2 vorgeschlagen und implementiert und wird seit geraumer Zeit im IE unterstützt.

Sie deklarieren es im CSS folgendermaßen:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Dann können Sie es einfach wie die anderen Standardschriftarten referenzieren:

 h3 { font-family: Delicious, sans-serif; }

In diesem Fall also

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

Und Sie müssen nur die JUNEBUG.TFF am selben Speicherort wie die HTML-Datei ablegen.

Ich habe die Schriftart von der dafont.com- Website heruntergeladen:

http://www.dafont.com/junebug.font

Nicolas Modrzyk
quelle
1
Entschuldigung, wenn es "Hausaufgaben" sind, wie würde der Code aussehen, wenn ich diese JUNEBUG-Schriftart nur für den Klartext verwenden würde
Adam
Ich wusste nicht, dass du das kannst. Funktioniert es auch in anderen Browsern?
Julien Bourdon
1
Funktioniert in jedem anständigen Browser: webfonts.info/wiki/index.php?title=@font-face_browser_support
Nicolas Modrzyk
Funktioniert bei mir nicht, meine Schrift befindet sich im selben Ordner wie meine PHP-Seite.
Schwarz
1
Der in angegebene @ Black-Pfad bezieht sich darauf url, wo sich Ihre CSS- Datei befindet.
Alex Semeniuk
17

Für die bestmögliche Browserunterstützung sollte Ihr CSS-Code folgendermaßen aussehen:

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

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Weitere Informationen finden Sie im Artikel Verwenden von @ font-face unter CSS-tricks.com .

John Slegers
quelle
17

Sie können @ font-face in den meisten modernen Browsern verwenden.

Hier sind einige Artikel darüber, wie es funktioniert:

Hier ist eine gute Syntax zum Hinzufügen der Schriftart zu Ihrer App:

Hier sind einige Stellen zum Konvertieren von Schriftarten zur Verwendung mit @ font-face:

Cufon funktioniert auch, wenn Sie kein Schriftbild verwenden möchten, und es enthält eine gute Dokumentation auf der Website:

nheinrich
quelle
9

Versuche dies

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
 <div class="FontMarket">KhonKaen Market</div>
Erweitern Sie das Snippet

vilis.org

SIAMWEBSITE
quelle
4

Wenn Sie ein externes Stylesheet verwenden, könnte der Code ungefähr so ​​aussehen:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

Und sollte in einer separaten CSS-Datei (z. B. styles.css) gespeichert werden. Wenn sich Ihre CSS-Datei an einem vom Seitencode getrennten Speicherort befindet, sollte die eigentliche Schriftartdatei denselben Pfad wie die CSS-Datei haben, NICHT die HTML- oder PHP-Webseitendatei. Dann braucht die Webseite so etwas wie:

<link rel="stylesheet" href="css/styles.css">

im Abschnitt <head> Ihrer HTML-Seite. In diesem Beispiel sollte sich die Schriftartdatei zusammen mit dem Stylesheet im CSS-Ordner befinden. Fügen Sie danach einfach die class = "junebug" in ein beliebiges Tag in Ihrem HTML ein, um die Junebug-Schriftart in diesem Element zu verwenden.

Wenn Sie das CSS in die eigentliche Webseite einfügen, fügen Sie das Style-Tag im Kopf des HTML-Codes wie folgt hinzu:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

Der eigentliche Elementstil kann entweder oben aufgeführt <style>und pro Element nach Klasse oder ID aufgerufen werden, oder Sie können den Stil einfach inline mit dem Element deklarieren. Mit Element meine ich <div>, <p>, <h1> oder jedes andere Element im HTML, das die Junebug-Schriftart verwenden muss. Bei beiden Optionen sollte sich die Schriftartdatei (Junebug.ttf) im selben Pfad wie die HTML-Seite befinden. Von diesen beiden Optionen würde die beste Vorgehensweise folgendermaßen aussehen:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

und

<h1 class="junebug">This is Junebug</h1>

Und der am wenigsten akzeptable Weg wäre:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

und

<h1 style="font-family: Junebug;">This is Junebug</h1>

Der Grund, warum es nicht gut ist, Inline-Stile zu verwenden, ist, dass nach bewährten Methoden alle Stile an einem Ort aufbewahrt werden sollten, damit die Bearbeitung praktisch ist. Dies ist auch der Hauptgrund, warum ich die Verwendung der allerersten Option zur Verwendung externer Stylesheets empfehle. Ich hoffe das hilft.

Richard Stitz
quelle
-1

Es gibt eine einfache Möglichkeit, dies zu tun: Fügen Sie in der HTML-Datei Folgendes hinzu:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

Hinweis: Sie geben den Namen der .ttf-Datei ein, die Sie haben. Gehen Sie dann zu Ihrer CSS-Datei und fügen Sie hinzu:

h1 {
    color: blue;
    font-family: vermin vibes;
}

Hinweis: Sie geben den Namen der Schriftfamilie der Schriftart ein, die Sie haben.

Hinweis: Schreiben Sie den Namen der Schriftfamilie nicht als Ihren font.ttf-Namen. Beispiel: Wenn Ihr font.ttf-Name "vermin_vibes.ttf" lautet, lautet Ihre Schriftfamilie: "vermin vibes" Die Schriftfamilie enthält keine Sonderzeichen als "-, _" ... usw. darf es nur Leerzeichen enthalten.

Abbass Sharara
quelle
Sie sollten es wirklich als font-facein CSS definieren, anstatt eine ttf-Datei zu benötigen.
Arcath
es ist nicht erforderlich, damit du es einfach so machen kannst. Ich mache es immer auf zwei Arten und beide funktionieren
Abbass Sharara
@Arcath warum ist es besser, Schriftarten zu verwenden?
Antonio Araujo