@font-face: beliebige Schriftarten auf Webseiten verwenden

1 | 7 Kommentare | 12346 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "@font-face: beliebige Schriftarten auf Webseiten verwenden" mit Ihrem Wissen!

Anzeige Hier werben

@font-face

Werte: url(), unicode-range
Standardwert: keinen
Vererbung: Ja
Kurzschreibweise: keine
Anwendbar auf: alle Elemente
CSS-Level: CSS, CSS3

Mit @font-face ist es möglich beliebige Schriftarten, die sich auf dem Server befinden, einzubinden. Somit kann auf der Website eine Schriftart verwendet werden, die der Besucher nicht installiert hat.

Bild zu @font-face: beliebige Schriftarten auf Webseiten verwenden
@font-face in midori

Die meisten Schriftarten (Fonts) sind durch eine Lizenz geschützt. Sie dürfen eine Schriftart also nur verwenden, wenn sie lizenzfrei ist, oder Sie eine Ausreichende Lizenz besitzen.

Noch zu korrigieren/vervollständigen:

  • Muss unter werte font-style etc aufgelistet werden?
  • In welchem Browser kann welcher Schriftartentyp verwendet werden?
  • Was ist mit SVG Fonts? Die können auch schon irgendwo benutzt werden.
  • Kostenlose Schriftarten können, glaube ich nicht auf jeden Fall verwendet werden, man muss auch die Erlaubnis haben sie zu verbereiten.
  • Die Informationen hier einarbeiten
  • Links zu kostenlos verwendbaren Schriftarten

Werte

Nachdem mit @font-face eine Schriftart "generiert" wurde, kann sie mit fast den selben Bezeichnungen wie schon font gestaltet werden und einer Schriftendatei zugewiesen werden.

Eigenschaft
 Bedeutung

 Beispiel
font-family
 Legt den Namen des Fonts fest
 font-family: "comicserif";
font-style
 Legt den Schriftstil fest. font-style: italic;
font-variant Legt die Darstellung fest, ob normal oder in kleinen großbuchstaben.
 font-variant: small-caps;
font-weight Gibt an, wie Fett ein Text ausgegeben wird.
 font-weight: 900;
font-stretch Beschreibt wie eng oder weit der Text ausgegeben wird.
 font-weight: expanded;
font-size Legt die Schriftgröße fest.
 font-size: 2.8em;
src: Gibt die Schriftdatei oder die URI des Fonts zum Download an.
 src: url("http://website.de/font/comicserif.eot");

Es gibt verschiedene Schrift-Ressourcen, welche an ihren Endungen definiert werden:

Endung
 Format
*.pfr
 TrueDoc Portable Font Resource
*.eot Embedded OpenType
*.pfb / *.pfa PostScript Type 1
*.ttf Truetype bzw. Opentype
*.gx Trutype mit gx Suffix
*.type / *.lib Intellifont
*.otf Opentype

Kompatibilität

Firefox3.6Unbekannt4Unbekannt
IE6Fast7Fast8Unterstützt9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
34%
CSS3: @font-face: Schriftart defnineren

@font-face wurde im CSS2 definiert und verschwand wieder mit CSS2.1. Nun wurde es vom W3C offiziell in CSS3 Implementiert.

Der Internet Explorer akzeptiert nur embedded-opentype (*.eot) Schriften.

Beispiel

Absatz mit comic-schriftart  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "comicserif";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "comicserif", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> Dieser Textkopf wird mit dem Font comicserif ausgegeben</H1>
  </BODY>
</HTML>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "@font-face: beliebige Schriftarten auf Webseiten verwenden" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "@font-face: beliebige Schriftarten auf Webseiten verwenden" hier bearbeiten.

Mitarbeiter

Kommentare: @font-face: beliebige Schriftarten auf Webseiten verwenden

Neuen Kommentar schreiben
kostenlos != frei verwendbar
Beantworten

oder irre ich mich? Wenn ich eine Schriftart kostenfrei unter der Bedingung weitergebe, dass man sie nicht weiter verbreiten darf, dann dürfte man die doch auch nicht einsetzen, zumindest nicht, wenn man sie auf dem eigenen Server liegen hätte oder nicht?

Holger V am 30.10.2008 um 11:11
Re: kostenlos != frei verwendbar
Beantworten

Mich würde interessieren wie es dann handgehabt wird, wenn ich den Font direkt von der Seite die ihn kostenfrei anbietet einbinde. Hiermit stelle ich ja nicht wirklich den Font als Download zur verfügung, sondern verwende ihn nur.

Patrick Freitag am 11.11.2008 um 12:05
Re: kostenlos != frei verwendbar
Beantworten

Genau deswegen habe ich mir jetzt mal die Freihet genommen, dass abzuformulieren.

Sebastian Bechtel am 30.10.2008 um 19:48
...
Beantworten

Wie sieht das mit dem Download aus? Wird die Schriftart runtergeladen und direkt im Hintergrund installiert und somit auch auf der Website erkennbar sein oder wird die Schriftart nur zum Download angeboten? Gibt es zwischen den Browsern verschiedene Vorgehensweisen? Naja die Implementierung ist ja nicht schlecht, man kann die Schriftart schon mit im Layout mit einbauen, gibt ja immer noch die alternativen Schriftarten. Wenn es soweit ist und immer mehr Browser diese Funktion unterstützen, blüt optisch mit jedem Browser-Implementierung die Seite auf! ;)

Darius M. am 28.10.2008 um 20:03
Re: ...
Beantworten

Also, laut dem W3C, wird der Font der im Hintergrund runtergeladen wird nicht für andere Applikationen verwendbar sein. ;) grüße

Kevin Gruesser am 28.10.2008 um 21:43
Re: ...
Beantworten

Also der Font wird direkt vom Browser heruntergeladen, ob dieser die Fonts in den entsprechenden Ordner packt oder in einen eigenen Ordner für "Web-Fonts" kann ich dir nicht sagen.

Kevin Gruesser am 28.10.2008 um 21:30
Re: ...
Beantworten

liegt das nicht einfach im browsercache wie alles andere?

hab keine zeit, aber wer den firefox 3.1 oder safari 3 hat kann ja mal testen info: http://www.css3.info/font-face-in-the-wild/.

hab noch fehler korrigiert im artikel ;)

meggs am 28.10.2008 um 22:28