TTF

TrueType Font — das branchenübliche binäre Schriftformat, entwickelt von Apple und Microsoft.

.ttf TrueType-Schriftformat
TypBinärer Kontur
KomprimierungKeine
DateigrößeMittel (unkomprimiert)
Unterstützung98 %+ Browser
Ideal fürDesktop-Apps, Entwicklung
BobcornZentrales Zwischenformat

Was ist TTF?

TrueType wurde von Apple Ende der 1980er Jahre als Alternative zu Adobes PostScript Type 1-Fonts entwickelt und später von Microsoft für Windows übernommen. Es speichert Glyphen-Konturen als quadratische Bézier-Kurven, die rechnerisch einfacher (und schneller zu rastern) sind als die kubischen Kurven von PostScript.

TTF wurde schnell zum universellen Schriftformat für macOS und Windows. Über zwei Jahrzehnte war es die Standardmethode zur Verteilung von Schriften — von Systemschriften bis hin zu benutzerdefinierten Schriftarten. Obwohl WOFF/WOFF2 es für die Web-Auslieferung weitgehend ersetzt haben, bleibt TTF das Fundament, auf dem alle modernen Web-Schriftformate aufgebaut sind.

Funktionsweise

Eine TTF-Datei ist ein binärer Container, der in Tabellen organisiert ist, von denen jede einen bestimmten Datentyp speichert:

  • glyf — Glyphenkonturen (die eigentlichen Vektorformen)
  • cmap — Zeichen-zu-Glyphen-Abbildung (welcher Unicode-Codepunkt welcher Glyphe zugeordnet ist)
  • head — Schrift-Metadaten (Einheiten pro Em, Erstellungsdatum, Flags)
  • hmtx — horizontale Metriken (Vorschubbreite und linkes Seitenlager für jede Glyphe)

Bei Icon-Fonts wird jedes Icon einem Unicode-Codepunkt im Private Use Area (U+E000 bis U+F8FF) zugewiesen — ein Bereich, der speziell für anwendungsdefinierte Zeichen reserviert ist, die nicht mit Standardtext in Konflikt geraten.

Verwendung einer TTF-Icon-Font in CSS
@font-face {
  font-family: 'MyIcons';
  src: url('myicons.ttf') format('truetype');
}

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
}

.icon-home::before {
  content: '\E001';
}

Der format('truetype')-Hinweis teilt dem Browser mit, welche Art von Schriftdatei erwartet wird, damit er den Download überspringen kann, wenn TrueType nicht unterstützt wird (obwohl praktisch alle Browser es unterstützen).

Vor- und Nachteile

    Vorteile
  • Universelle Kompatibilität auf allen Plattformen
  • Überall unterstützt — Desktop, Mobilgeräte und Web
  • Standardformat für die OS-Schriftinstallation
  • Gute Renderqualität mit Hinting-Unterstützung
  • Gut dokumentierte Spezifikation
    Nachteile
  • Keine Komprimierung — größer als WOFF/WOFF2
  • Nicht für Web-Auslieferung optimiert
  • Kann bei mobilen Verbindungen langsam heruntergeladen werden

Browser-Unterstützung

TTF verfügt über eine Browser-Unterstützung von 98 %+, einschließlich aller modernen Browser und Internet Explorer 9+. Es wird auch nativ von jedem großen Desktop-Betriebssystem unterstützt — Windows, macOS und Linux — was bedeutet, dass Sie eine TTF-Datei direkt als Systemschrift installieren können, ohne eine Konvertierung vorzunehmen.

Obwohl TTF überall funktioniert, sollten Sie für die Web-Auslieferung WOFF2 bevorzugen (das im Grunde ein komprimiertes TTF ist). Behalten Sie das rohe TTF für den Desktop-Einsatz, die Entwicklung und als Basisformat in Ihrer Build-Pipeline.

Wann TTF verwenden

  • Desktop-Anwendungen — als Systemschrift für die Verwendung in nativen Apps, Design-Tools oder IDEs installieren.
  • Electron und native Apps — das TTF direkt mit Ihrer Anwendung für Offline-Schrift-Rendering bündeln.
  • Entwicklung und Tests — TTF lässt sich mit Schriftwerkzeugen wie FontForge, fontTools oder System-Schriftbetrachtern leicht inspizieren.
  • System-Schriftprüfung — wenn Sie Glyphenmetriken, Hinting oder cmap-Tabellen mit OS-Dienstprogrammen überprüfen müssen.
Bobcorn
In Bobcorn ist TTF das zentrale Pivotformat in der Generierungs-Pipeline. Ihre SVG-Icons werden zunächst in einer SVG-Font zusammengestellt, dann in TTF konvertiert, und von dort in WOFF, WOFF2 und EOT. TTF wird immer als Teil der Pipeline generiert — es ist das Format, von dem alle anderen Ausgaben abhängen. Aktivieren Sie den TTF-Export, wenn Sie Desktop-Apps erstellen oder die Icon-Font auf Ihrem Betriebssystem installieren möchten.