Wie installiere ich eine benutzerdefinierte Schriftart auf einer HTML-Site

Question 1

Ich verwende kein Flash oder PHP – und ich wurde gebeten, einem einfachen HTML-Layout eine benutzerdefinierte Schriftart hinzuzufügen. “KG Junikäfer”

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

Question 2

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

Sie deklarieren es im CSS wie folgt:

 @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 einfach wie die anderen Standardschriften darauf verweisen:

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

Also in diesem Fall

<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 an der gleichen Stelle wie die HTML-Datei ablegen.

Ich habe die Schriftart von heruntergeladen dafont.com Webseite:

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

Question 3

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

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

http://webdesignerwall.com/general/font-face-solutions-suggestions

http://webdesignerwall.com/tutorials/css3-font-face-design-guide

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

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Hier sind ein paar Orte, an denen Sie Schriftarten für die Verwendung mit @font-face konvertieren können:

http://www.font2web.com/

Auch cufon funktioniert, wenn Sie keine Schriftart verwenden möchten, und es gibt eine gute Dokumentation auf der Website:

http://cufon.shoqolate.com/generate/

Question 4

Für die bestmögliche Browserunterstützung sollte Ihr CSS-Code so 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 Verwendung von @font-face bei CSS-tricks.com.

Question 5

Versuche dies

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

vilis.org

Question 6

Wenn Sie ein externes Stylesheet verwenden, könnte der Code etwa 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 gespeichert werden (z. B. styles.css). Wenn sich Ihre .css-Datei an einem anderen Ort als der Seitencode befindet, sollte die tatsächliche 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="https://stackoverflow.com/questions/7961721/css/styles.css">

im -Abschnitt Ihrer HTML-Seite. In diesem Beispiel sollte sich die Schriftdatei 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 in den Kopf des HTML-Codes ein:

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

Und der eigentliche Elementstil kann entweder in den obigen eingeschlossen werden <style> und pro Element nach Klasse oder ID aufgerufen, oder Sie können den Stil einfach inline mit dem Element deklarieren. Mit Element meine ich

,

oder jedes andere Element innerhalb des HTML, das die Junebug-Schriftart verwenden muss. Bei beiden Optionen sollte sich die Schriftdatei (Junebug.ttf) im selben Pfad wie die HTML-Seite befinden. Von diesen beiden Optionen würde die Best Practice wie folgt 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 bewährte Verfahren vorschreiben, dass Stile alle an einem Ort aufbewahrt werden sollten, damit die Bearbeitung praktisch ist. Das ist auch der Hauptgrund, warum ich empfehle, die allererste Möglichkeit zu nutzen, externe Stylesheets zu verwenden. Ich hoffe das hilft.

Dorothee Baby

Und Sie müssen einfach JUNEBUG.TFF an der gleichen Stelle wie die HTML-Datei ablegen.

Ich habe die Schriftart von heruntergeladen Schriftarten Webseite:

Abbas Sharara

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

<link rel="stylesheet" href="https://stackoverflow.com/questions/7961721/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 Folgendes 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 Namen für font.ttf. Beispiel: Wenn Ihr Name für font.ttf lautet: “vermin_vibes.ttf”, lautet Ihre Schriftfamilie: “vermin vibes” Die Schriftfamilie enthält keine Sonderzeichen als “-,_”…etc darf es nur Leerzeichen enthalten.

Sie sollten es wirklich als definieren font-face in CSS, anstatt eine ttf-Datei zu benötigen.

– Arkath

10. Oktober 2017 um 8:46 Uhr
es ist nicht nötig, du kannst es einfach so machen ich mache es immer auf die beiden Arten und beides geht

– Abbas Sharara

10. Oktober 2017 um 9:49 Uhr
@Arcath warum ist es besser, Font-Face zu verwenden?

– Antonio

10. Februar 2020 um 0:10 Uhr

8438000cookie-checkWie installiere ich eine benutzerdefinierte Schriftart auf einer HTML-Site