Wie einige Nicht-Standard-Schriftart auf eine Website hinzufügen?

https://stackoverflow.com/questions/107936

01-07-2019
|

Frage

Gibt es eine Möglichkeit, einige benutzerdefinierte Schriftart auf der Website hinzufügen, ohne Bilder zu verwenden, Flash- oder einige andere Grafiken?

Zum Beispiel arbeitete ich auf einige Hochzeit Website, und ich war viele schöne Schriften für dieses Thema zu finden, aber ich kann den richtigen Weg nicht finden, dass die Schriftart auf dem Server hinzuzufügen, und wie kann ich schließen, dass font mit CSS in das HTML-Format? Ist dies möglich, ohne Grafiken zu tun?

Lösung

Dieses via CSS getan werden könnte:

<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 regulären Browsern unterstützt , wenn Sie verwenden TrueType- Fonts (TTF) oder das Web Open Font Format (WOFF).

Andere Tipps

Sie können einige Schriftarten über Google Web Fonts hinzuzufügen.

Technisch sind die Schriften bei Google gehostet und verknüpfen Sie sie im HTML-Header. Dann können Sie sie frei in CSS mit @font-face ( darüber lesen ).

Zum Beispiel:

Im <head> Abschnitt:

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

Dann in CSS:

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

Die Lösung recht zuverlässig scheint (auch Smashing Magazine verwendet es für einen Artikel Titel. ). Es gibt jedoch nicht so viele Schriftarten zur Verfügung, so weit in Google Font Directory-.

Die Art und Weise der @ font-face CSS Erklärung zu gehen wird mit dem Text auf ihren Web-Seiten anzuzeigen Autoren angeben Online-Schriftarten ermöglicht. Dadurch, dass Autoren ihre eigenen Schriftarten zur Verfügung zu stellen, @ font-face beseitigt die Notwendigkeit, auf die begrenzte Anzahl von Schriftarten abzuhängen Benutzer auf ihren Computern installiert haben.

Werfen Sie einen Blick auf die folgende Tabelle:

eingeben Bild Beschreibung hier

Wie Sie sehen können, gibt es mehrere Formate, die Sie brauchen, um in erster Linie auf Cross-Browser-Kompatibilität kennen. Das Szenario in mobilen Geräten ist nicht viel anders aus.

Lösungen:

1 - Full-Browser-Kompatibilität

Dies ist die Methode mit der tiefstenen Unterstützung möglich jetzt:

@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 - Die meisten Browser

Die Dinge Verschiebung allerdings stark auf WOFF , so dass Sie wahrscheinlich mit wegkommen:

@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 der neueste Browser

oder auch nur WOFF.
Sie verwenden es dann wie folgt aus:

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

Referenzen und weiterführende Literatur:

Das ist in erster Linie, was Sie über die Implementierung dieser Funktion wissen müssen. Wenn Sie mehr über das Thema erforschen wollen werde ich fördern bei den folgenden Ressourcen, um einen Blick zu nehmen. Das meiste, was ich hier gestellt wird, extrahiert aus den folgenden

Wenn von Nicht-Standard-Schriftart, Sie benutzerdefinierte Schriftart eines Standardformats bedeuten, hier ist, wie ich es tun, und es funktioniert für alle Browser Ich habe schon so weit:

@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 */
}

so müssen Sie nur sowohl die ttf und EOT-Fonts. Einige Tools online verfügbar kann die Konvertierung machen.

Aber wenn Sie Schriftart in einem Nicht-Standard-Format (Bitmaps usw.) anhängen möchten, kann ich Ihnen nicht helfen.

Ich habe festgestellt, dass der einfachste Weg, Nicht-Standard-Schriften hat auf einer Website zu verwenden, ist

Der Artikel font-face in IE: geschlagen. Web Fonts Arbeit sagt, es mit allen drei gängigen Browsern funktioniert

Hier ist ein Beispiel ich habe Arbeit: http://brendanjerwin.com/test_font.html

Weitere Diskussion ist in Embedding Fonts .

Typeface.js und Cufon zwei weitere interessante Möglichkeiten. Sie sind JavaScript-Komponenten, die spezielle Schriftart Daten im JSON-Format übertragen (die Sie von Truetype umwandeln kann oder außer Internet Opentype Formaten auf ihren Websites) über den neuen

Das Hauptproblem bei beiden (ab sofort) ist, dass Textauswahl nur nicht funktioniert oder zumindest funktioniert recht ungeschickt.

Dennoch ist es sehr schön für Schlagzeilen. Body text ... ich weiß es nicht.

Und es ist überraschend schnell.

Oder Sie könnten versuchen, sIFR . Ich weiß, es verwendet Flash, aber nur, wenn verfügbar. Wenn Blitz nicht verfügbar ist, zeigt es, den ursprünglichen Text in seiner ursprünglichen (CSS) Schriftart.


Gibt es eine Möglichkeit einige benutzerdefinierte Schriftarten auf Website hinzufügen, ohne ... Flash?

Sicher, benutzen Silverlight .

Die Technik, die das W3C empfohlen hat für Sie diese „Einbettung“ genannt wird, und ist gut mit den drei Artikeln beschrieben hier: Embedding Fonts . In meinen begrenzten Experimenten habe ich diesen Prozess fehleranfällig gefunden und habe in einer Multi-Browser-Umgebung in der es Funktion nur begrenzten Erfolg gehabt.

Safari und Internet Explorer unterstützen sowohl die CSS @ font-face-Regel, aber sie zwei verschiedene eingebettete Schrifttypen unterstützen. Firefox plant die gleiche Art wie die von Apple einige Zeit bald zu unterstützen. SVG kann Schriften einbetten, ist aber nicht so weit noch unterstützt (ohne Plugin).

Ich denke, die meisten tragbare Lösung, die ich gesehen habe, ist eine JavaScript-Funktion zu verwenden, Überschriften zu ersetzen usw. mit einem Bild auf dem Server mit der Schrift der Wahl generierte und zwischengespeichert - diese Weise können Sie einfach den Text und don aktualisieren‘ t müssen in Photoshop stopfen herum.

Wenn Sie ASP.NET verwenden, ist es wirklich einfach, bildbasierte Schriftarten zu erzeugen, ohne tatsächlich (wie in Ergänzung der installierten Schriftarten Base) Schriftarten auf dem Server unter Verwendung zu installieren:

PrivateFontCollection pfont = new PrivateFontCollection(); pfont.AddFontFile(filename); FontFamily ff = pfont.Families[0];

und dann mit dieser Schriftart auf einem Graphics Zeichnung.

Es sieht aus wie es nur im Internet Explorer funktioniert, aber eine schnelle Google-Suche nach „html Schriftart einbetten“ Ausbeuten http://www.spoono.com/html/tutorials/tutorial.php?id=19

Wenn Sie plattformunabhängig bleiben (und sollten!) Sie Bilder verwenden müssen, oder auch nur eine Standard-Schriftart verwenden.

habe ich ein wenig Forschung und ausgegraben Dynamische Textersetzung (veröffentlicht am 2004-06-15).

Diese Technik verwendet Bilder, aber es scheint, „Hände frei“ zu sein. Sie schreiben Ihren Text, und Sie lassen einige automatisierten Skripte automatisiert finden und Ersetzen auf der Seite für Sie on the fly.

Es hat einige Einschränkungen, aber es ist wahrscheinlich eine der einfacheren Möglichkeiten (und Browser kompatibel) als alle anderen die ich gesehen habe.

Es ist auch möglich WOFF-Schriften zu verwenden - zB hier

@font-face { font-family: 'Plakat Fraktur'; src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff'); font-weight: bold; font-style: normal; }

Einfach nur stellt die Verbindung zu tatsächlichen Schriftart wie folgt und Sie werden gut gehen

<!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'> <style> body { font-family: 'Montserrat';font-size: 22px; } </style> </head> <body> <h1>Montserrat</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </body> </html>

Typeface.js JavaScript Way:


Mit typeface.js können Sie benutzerdefinierte einbetten   Schriften in Ihren Web-Seiten, so dass Sie dies nicht tun   müssen Text zu den Bildern
render
Statt Bilder zu schaffen, oder mit   Flash nur Ihre Website Grafik zu zeigen,   Text in der Schriftart, die Sie möchten, können Sie verwenden   typeface.js und schreibt in einfachen HTML   und CSS, als ob Ihre Besucher hatten   die Schriftart installiert lokal.

http://typeface.neocracy.org/

Monotypie hat kürzlich eine Menge ihrer Fonts zusammen mit einem neuen System für sie auf Ihren Web-Seiten mit: http : //www.webfonts.fonts.com/

Siehe den Artikel 50 Nützliche Design tools für schöne Web-Typografie für alternative Methoden.

Ich habe nur verwendet Cufon . Ich fand es zuverlässig und sehr einfach zu bedienen, so dass ich mit ihm stecken.

Wenn Sie eine Datei Ihrer Schrift haben, dann müssen Sie mehr Formate dieser Schriftart für anderen Browser hinzuzufügen.

Zu diesem Zweck verwende ich Schriftgenerator wie Fontsquirrel es alle Formate Schriftart bietet & sein @ font-face CSS, werden Sie nur müssen nur per Drag & in der CSS-Datei löschen.

Ich fürchtet, Grafiken ist Ihre einzige Option in diesem Fall.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow