Wie füge ich einer Website eine nicht standardmäßige Schriftart hinzu?

Lesezeit: 8 Minuten

Wie fuge ich einer Website eine nicht standardmasige Schriftart hinzu
Vase

Gibt es eine Möglichkeit, eine benutzerdefinierte Schriftart auf einer Website hinzuzufügen, ohne Bilder zu verwenden? Blinken oder andere Grafiken?

Ich habe zum Beispiel an einer Hochzeitswebsite gearbeitet und viele schöne Schriftarten für dieses Thema gefunden. Aber ich kann nicht den richtigen Weg finden, diese Schriftart auf dem Server hinzuzufügen. Und wie füge ich diese Schriftart mit CSS in den HTML-Code ein? Geht das ohne Grafik?

  • Da diese Frage gestellt wurde, @font-face inzwischen viel breiter unterstützt und wird für den allgemeinen Gebrauch empfohlen. Sie müssen sich nur darüber im Klaren sein, dass der IE Schriftarten in einem anderen Format benötigt als andere Browser. Siehe stackoverflow.com/questions/2219916/is-font-face-usable-now

    – David Johnston

    15. April 2010 um 3:27 Uhr

  • Stellen Sie sicher, dass Sie das Recht haben, die Schrift zu verbreiten!

    – Vietnam

    31. Mai 2010 um 3:33 Uhr

  • Besuch typekit.comoder für die billigen fontsquirrel.com

    – Bjudson

    22. September 2010 um 2:51 Uhr

  • verwandt stackoverflow.com/questions/8050640/…

    – Adrien Be

    27. März 2014 um 13:04 Uhr

  • www.fontsquirrel.com scheint großartig zu sein, um die erforderlichen Schriftdateien zu generieren und eine gute kugelsichere @fontface-Syntax zu erstellen (wie die empfohlene fontspring.com/blog/fixing-ie9-font-face-problems)

    – Adrien Be

    27. März 2014 um 13:06 Uhr

Dies könnte über CSS erfolgen:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

es ist für alle gängigen Browser unterstützt wenn Sie TrueType-Fonts (TTF), das Web Open Font Format (WOFF) oder Embedded Opentype (EOT) verwenden.

  • Es ist nicht nutzlos, da es Standard ist: Je mehr Sie es implementieren, desto mehr wird es wahrscheinlich von Browsern implementiert. Das bedeutet nicht, dass Sie keinen anderen Weg finden sollten, um dies zu kompensieren, aber dies als Ergänzung zu verwenden, scheint mir gut zu sein.

    – e-Satis

    22. September 2008 um 9:14 Uhr

  • Firefox 3.1 unterstützt jedoch @font-face.

    – Ms2ger

    26. Februar 2009 um 15:20 Uhr

  • @brendanjerwin: aktualisierte Version Ihres Links – brendanjerwin.com/development/web/2009/03/03/…

    – Mattball

    21. September 2010 um 15:00 Uhr

  • @brendanjerwin: aktualisierte Version Ihres Links –brendanjerwin.com/blog/2009/03/03/embedding-fonts

    – Loren

    25. September 2012 um 0:58 Uhr

  • Hey Leute, wisst ihr was? Es ist jetzt fast 2016! Es wird jetzt weithin unterstützt! Yay! Gut, dass ich diese Antwort so spät gefunden habe. Haha.

    – Jessica

    17. Dezember 2015 um 22:43 Uhr

Wie fuge ich einer Website eine nicht standardmasige Schriftart hinzu
Michał Pękała

Sie können einige Schriftarten über hinzufügen Google Webfonts.

Technisch gesehen werden die Schriftarten bei Google gehostet und Sie verlinken sie im HTML-Header. Dann können Sie sie frei in CSS mit verwenden @font-face (Lese darüber).

Zum Beispiel:

In dem <head> Sektion:

 <link href="%20http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">

Dann im CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

Die Lösung scheint ziemlich zuverlässig zu sein (sogar Smashing Magazine verwendet es für einen Artikeltitel.). Es sind jedoch noch nicht so viele Schriftarten verfügbar Google Font-Verzeichnis.

  • Im Juli 2014 hat Google die Schriftarten erweitert und Google Noto-Schriftarten hinzugefügt, die die meisten Sprachen unterstützen google.com/get/noto/# . Abobe hat diese Open-Font-Initiative unterstützt, die alle Sprachen unterstützt blog.typekit.com/2014/07/15/introducing-source-han-sans

    – vsingh

    1. April 2015 um 15:07 Uhr


  • es scheint (Google Webfonts) unterstützt keine .eot- und .woff- und .svg-Versionen von Schriftarten. Es unterstützt nur die .ttf-Version von Schriftarten!

    – Mahdi Jazini

    4. September 2018 um 7:38 Uhr

1646307131 361 Wie fuge ich einer Website eine nicht standardmasige Schriftart hinzu
Javier Cádiz

Der Weg zum Ziel ist die Verwendung der CSS-Deklaration @font-face, mit der Autoren Online-Schriftarten angeben können, um Text auf ihren Webseiten anzuzeigen. Indem es Autoren ermöglicht, ihre eigenen Schriftarten bereitzustellen, beseitigt @font-face die Notwendigkeit, sich auf die begrenzte Anzahl von Schriftarten zu verlassen, die Benutzer auf ihren Computern installiert haben.

Werfen Sie einen Blick auf die folgende Tabelle:

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen können, gibt es mehrere Formate, die Sie hauptsächlich aufgrund der Cross-Browser-Kompatibilität kennen müssen. Das Szenario bei mobilen Geräten ist nicht viel anders.

Lösungen:

1 – Vollständige Browserkompatibilität

Dies ist die Methode mit der tiefsten Unterstützung, die derzeit möglich ist:

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

2 – Der größte Teil des Browsers

Dinge sind Verschiebung stark in Richtung WOFF obwohl, so dass Sie wahrscheinlich davonkommen können:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 – Nur die neuesten Browser

Oder auch nur WOFF.
Sie verwenden es dann wie folgt:

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

Referenzen und weiterführende Literatur:

Das ist hauptsächlich das, was Sie über die Implementierung dieser Funktion wissen müssen. Wenn Sie mehr zu diesem Thema recherchieren möchten, empfehle ich Ihnen, einen Blick auf die folgenden Ressourcen zu werfen. Das meiste, was ich hier schreibe, ist aus dem Folgenden extrahiert

  • Die äußerst handlich Schrift-Eichhörnchen-Werkzeug kann das für die vollständige Browserunterstützung erforderliche CSS generieren. Sie können die Schriftart sogar in einem dieser Formate hochladen, sie in alle anderen Formate konvertieren und sie alle herunterladen. Es ist ein Lebensretter, wenn es um benutzerdefinierte Schriftarten geht.

    – Jakob Stamm

    8. Oktober 2016 um 3:55 Uhr

  • Was macht svgFontName stehen für? Soll ich ihn in den Namen meiner Schriftfamilie ändern oder so lassen, wie er ist?

    – Deutsch

    19. November 2016 um 17:15 Uhr

Wenn Sie mit nicht standardmäßiger Schriftart eine benutzerdefinierte Schriftart in einem Standardformat meinen, gehe ich wie folgt vor, und sie funktioniert für alle Browser, die ich bisher überprüft habe:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

Sie brauchen also nur die Schriftarten ttf und eot. Einige online verfügbare Tools können die Konvertierung durchführen.

Aber wenn Sie Schriftarten in einem nicht standardmäßigen Format (Bitmaps usw.) anhängen möchten, kann ich Ihnen nicht helfen.

1646307131 761 Wie fuge ich einer Website eine nicht standardmasige Schriftart hinzu
Matt

Ich habe festgestellt, dass der einfachste Weg, nicht standardmäßige Schriftarten auf einer Website zu haben, darin besteht, sie zu verwenden sIFR

Es beinhaltet die Verwendung eines Flash-Objekts, das die Schriftart enthält, aber es wird problemlos zu Standardtext / Schriftart degradiert, wenn Flash nicht installiert ist.

Der Stil wird in Ihrem CSS festgelegt und JavaScript richtet den Flash-Ersatz für Ihren Text ein.

Bearbeiten: (Ich empfehle immer noch, Bilder für nicht standardmäßige Schriftarten zu verwenden, da sIFR einem Projekt Zeit hinzufügt und Wartung erfordern kann).

  • Was für eine schreckliche Idee! Ich habe Flash in meinem Browser, aber auch Flashblock. Auf dieser Website zeigt mein Browser eine schrecklich verunstaltete Seite an. Flash sollte etwas bleiben, das Sie für große Animationen oder Filme verwenden. Zu viel Blitz ist sehr nervig und visuell, mein mein…

    – e-Satis

    22. September 2008 um 9:17 Uhr

  • @e-satis: Wieso? Persönlich bemerke ich nie den Unterschied zwischen einer Seite, die sIFR verwendet, und einer Seite, die dies nicht tut, abgesehen von den subtilen Unterschieden in der Textwiedergabe. Ich denke, es ist eine großartige Idee, ehrlich gesagt, obwohl @font-face ist viel besser, wo unterstützt.

    – Sasha Chedygov

    15. April 2010 um 3:14 Uhr

  • “Bearbeiten: (Ich empfehle immer noch, Bilder für nicht standardmäßige Schriftarten zu verwenden, da sIFR einem Projekt Zeit hinzufügt und Wartung erfordern kann).” sehr gut gesagt. sIFR ist eine wirklich coole Technik, aber es scheint viel zu erfordern, um das EXAKTE Aussehen zu erhalten, das Sie wollen. Wenn Sie die Zeit haben, diese Technik zu lernen und zu beherrschen, kann ich sie nur wärmstens empfehlen. Aber wenn Sie nach einer schnellen und einfachen Technik zum Ersetzen von Schriftarten suchen, würde ich die Bildersetzung oder sogar die CSS-Eigenschaft @font-face verwenden

    – Derek Adair

    9. Juli 2010 um 16:00 Uhr

1646307132 522 Wie fuge ich einer Website eine nicht standardmasige Schriftart hinzu
Peter Mortensen

Der Artikel Schriftart im IE: Webfonts zum Laufen bringen sagt, dass es mit allen drei großen Browsern funktioniert.

Hier ist ein Beispiel, das ich zum Laufen gebracht habe: http://brendanjerwin.com/test_font.html

Weitere Diskussionen sind in Schriftarten einbetten.

  • Was für eine schreckliche Idee! Ich habe Flash in meinem Browser, aber auch Flashblock. Auf dieser Website zeigt mein Browser eine schrecklich verunstaltete Seite an. Flash sollte etwas bleiben, das Sie für große Animationen oder Filme verwenden. Zu viel Blitz ist sehr nervig und visuell, mein mein…

    – e-Satis

    22. September 2008 um 9:17 Uhr

  • @e-satis: Wieso? Persönlich bemerke ich nie den Unterschied zwischen einer Seite, die sIFR verwendet, und einer Seite, die dies nicht tut, abgesehen von den subtilen Unterschieden in der Textwiedergabe. Ich denke, es ist eine großartige Idee, ehrlich gesagt, obwohl @font-face ist viel besser, wo unterstützt.

    – Sasha Chedygov

    15. April 2010 um 3:14 Uhr

  • “Bearbeiten: (Ich empfehle immer noch, Bilder für nicht standardmäßige Schriftarten zu verwenden, da sIFR einem Projekt Zeit hinzufügt und Wartung erfordern kann).” sehr gut gesagt. sIFR ist eine wirklich coole Technik, aber es scheint viel zu erfordern, um das EXAKTE Aussehen zu erhalten, das Sie wollen. Wenn Sie die Zeit haben, diese Technik zu lernen und zu beherrschen, kann ich sie nur wärmstens empfehlen. Aber wenn Sie nach einer schnellen und einfachen Technik zum Ersetzen von Schriftarten suchen, würde ich die Bildersetzung oder sogar die CSS-Eigenschaft @font-face verwenden

    – Derek Adair

    9. Juli 2010 um 16:00 Uhr

1646307132 522 Wie fuge ich einer Website eine nicht standardmasige Schriftart hinzu
Peter Mortensen

Schriftart.js und Cufon sind zwei weitere interessante Optionen. Sie sind JavaScript-Komponenten, die spezielle Schriftdaten im JSON-Format rendern (aus dem Sie konvertieren können TrueType oder Offener Typ Formate auf ihren Websites) über das neue -Element in allen neueren Browsern außer Internet Explorer und via VML im Internet-Explorer.

Das Hauptproblem bei beiden ist (bis jetzt), dass die Textauswahl nicht oder nur sehr umständlich funktioniert.

Trotzdem ist es sehr schön für Schlagzeilen. Haupttext … Ich weiß es nicht.

Und es ist überraschend schnell.

  • Eine weitere interessante Option ist das ähnliche Konzept von typekit.com.

    – Zach

    20. Dezember 2009 um 14:40 Uhr

922930cookie-checkWie füge ich einer Website eine nicht standardmäßige Schriftart hinzu?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy