#[Doku] Einbindung von Schriften

Andreas Kargus
Beiträge: 6
Registriert: Mo. 23. Feb 2015, 15:38
Vorname: Andreas
Nachname: Kargus

#[Doku] Einbindung von Schriften

Beitragvon Andreas Kargus » Mo. 26. Jun 2017, 10:28

Bild


https://proadsoftware.zendesk.com/hc/de ... 0009656998


Umzug nach ZENDESK abgeschlossen




Einbindung von Schriften

Dokumentationsstand: 5.0.137
Diese Dokumentation richtet sich an fortgeschrittene Anwender und Administratoren.



Einleitung

Schriften haben mehrere interne Bezeichnungen, darunter der normale Schriftname, ein oder mehrere Angaben über die Schriftfamilie und andere. Diese Angaben sind in der Schriftdatei eingebettet und haben nichts mit dem Dateinamen zu tun, sie sind Teil der Schrift. 
PROAD benötigt für die reibungslose Darstellung von Schriften interne Namen die nicht länger als 8 Zeichen lang sind und die innerhalb eines Dokuments eine eindeutige Bezeichnung haben, insbesondere wenn es um verschiedene Schriftschnitte einer Schriftfamilie geht. Wir empfehlen die Schriftfamilie vollständig aufzulösen, so dass jede Schrift ihre eigene Schriftfamilie ist, Schriftnamen und Familiennamen sollten gleich sein.
Aus diesen Gründen können wir Webfonts, z.B. von Google, nicht ohne Anpassung unterstützen und auch gekaufte Fonts sind meist nicht direkt für die PDF Generierung geeignet. Google bietet aber an, die Fonts herunterzuladen und es gibt kostenfreie Tools die es ermöglichen die Schriften anzupassen.
Diese Anleitung erklärt wie das mit dem Programm FontForge funktioniert und worauf man achten muss.



Schriften mit FontForge anpassen

Schriften können intern sehr lange Namen haben. Dies macht bei der PDF-Ausgabe Probleme. Dies betrifft ebenfalls die Verwendung verschiedener Schriftschnitte einer Schriftenfamilie in einem Dokument. Dies kann aber durch Anpassung der Schriftdateien gelöst werden.

Wir empfehlen derzeit den Einsatz von FontForge zur Bearbeitung der Schriftdateien (kostenlos erhältlich auf https://fontforge.github.io/en-US/)

Ablauf

Öffnen Sie Ihre Schriftdatei mit FontForge
Über [Element -> Schrift-Eigenschaften] kann nun der Schriftname und der Familienname des Fonts angepasst werden.
  • Abschnitt 'PS Names' - Eigenschaft 'Schriftname'Der Name darf nicht länger als 8 Zeichen sein, sollte eindeutig sein im Hinblick auf die Verwendung in den PROAD Dokumentvorlagen und kein Name darf Prefix einer anderen Schrift sein.
    Richtig: fontReg (für den normalen Schriftschnitt) und fontLT (für den light Schriftschnitt).
    Falsch: font (für den normalen Schriftschnitt) und fontLT (für den light Schriftschnitt).
  • Abschnitt 'PS Names' - Eigenschaft 'Familienname' - Identisch zum Schriftnamen setzen.
  • Abschnitt 'TTF Names' - Eigenschaft 'Familienname' - Identisch zum Schriftnamen setzen.
  • Abschnitt 'TTF Names' - Eigenschaft 'Fullname' - Identisch zum Schriftnamen setzen.
  • Abschnitt 'TTF Names' - Eigenschaft 'Preferred Family' (nicht immer vorhanden) - Identisch zum Schriftnamen setzen.
  • Mit Ok den Dialog bestätigen. Hier kann es zu Nachfragen kommen. Diese einfach ebenfalls bestätigen.
Nun die Schrift speichern. [Datei --> Speichern]. FontForge erzeugt eine Projektdatei mit der Endung ".sfd".
Jetzt können Sie die Schrift exportieren. [Datei --> Fonts herstellen...]
Fonttyp "Truetype" auswählen.
Mit "Generate" wird die Truetype-Datei erzeugt.
Auch hier kann es zu Nachfragen kommen. Oft haben Fonts Fehler oder FontForge gibt Warnungen aus. Diese können ignoriert werden.
Als Ergebnis sollte eine .ttf-Datei erzeugt worden sein.
Schrift als Truetype-Font Datei in eine PROAD Dokumentvorlage einbinden

Direkt auf Ihrem Server muss im Verzeichnis "PROADSoftware\webserver\htdocs" ein Unterverzeichnis "fonts" angelegt werden.
Alternativ kann die Datei auch über einen Cloud Dienst eingebunden werden. Dazu die Datei einfach in die entsprechende Cloud hochladen und die Adresse im @font-face als URL angeben. Wichtig hierbei ist, dass der Cloud Dienst über https, also über eine verschlüsselte Verbindung, erreichbar ist.
Die Truetype-Font Datei dort ablegen.
In PROAD die gewünschte Dokumentvorlage öffnen und in den Quellcode-Modus wechseln.
Gleich am Anfang des Quellcodes im <style>-Bereich kann die Schrift eingebunden werden: (Kommentare sind mit /* und */ gekennzeichnet)

Code: Alles auswählen

@font-face {     font-family: "fontLT"; /* der Name der Schrift */     src: url("https://WEBSEITE-EINFÜGEN/fonts/fontLT.ttf"); /* achten sie auf eine sichere Verbindung via https:// */     font-weight: normal;     font-style: normal; }
Die Schrift kann nun über CSS angesprochen werden:

Code: Alles auswählen

<p style="font-family: fontLT;">Das ist ein Schriftentest</p>
Schrift als Truetype-Font Datei über die PROAD Fonts-Liste einbinden
  • Im Verzeichnis "PROADSoftware\webserver\htdocs" ein Unterverzeichnis "fonts" anlegen.
  • Die Truetype-Font Datei dort ablegen.
  • Den Dialog [Agentur -> Einstellungen -> Grundeinstellungen -> Dokumente] öffnen.
  • Hier einen neuen Eintrag in der Fonts Liste machen.
    • Fontname - Mein Font
      Hier kann tatsächlich ein für das menschliche Auge gefälligerer Name eingetragen werden
    • Fontfamily - fontLT
      Muss der "font-family" im jetzt kommenden CSS Block entsprechen.
    • Font-CSS

      Code: Alles auswählen

      @font-face {     font-family: "fontLT"; /* der Name der Schrift */     src: url("https://WEBSEITE-EINFÜGEN/fonts/fontLT.ttf"); /* achten sie auf eine sichere Verbindung via https:// */     font-weight: normal;     font-style: normal; }
  • Speichern und sich neu Anmelden.
  • Ab jetzt steht der Font auch im CKEditor in der Fonts-Dropdown zur Verfügung und kann normal verwendet werden. Alles weiter wird bitte der Dokumentation im PROAD Forum entnommen.

Das Arbeiten mit Schriftschnitten

Anpassung der PROAD Mustervorlage

Beispiel:

Code: Alles auswählen

@font-face {     font-family: "fontLT";     src: url("https://WEBSEITE-EINFÜGEN/fonts/fontLT.ttf");     font-weight: normal;     font-style: normal; } @font-face {     font-family: "fontBO";     src: url("https://WEBSEITE-EINFÜGEN/fonts/fontBO.ttf");     font-weight: normal;     font-style: normal; } table , tr , td ,  thead ,  tfoot, body, p, .cke_editable, div {      font-family: fontLT; /* Standardschrift, diese wird als Grundschrift für das Dokument verwendet */     font-size:10pt;     line-height: 1.2;     color:rgb(0,0,0);     background:rgba(0,0,0,0); } strong,b,strong span, span strong {     font-family: "fontBO";     font-weight: normal;     font-style: normal; }
Im oberen Beispiel wurden 2 Schriften eingebunden. Eine "light"-Schriftschnitt und ein "bold"-Schriftschnitt. Die Light Variante soll für das ganze Dokument gelten, es sein denn etwas wird Bold dargestellt.

Um dies zu erreichen kann man die HTML-Bereiche für Bold "überschreiben". Dies geschieht mit

Code: Alles auswählen

strong,b,strong span, span strong {     font-family: "fontBO";     font-weight: normal;     font-style: normal; }
Damit weist man den Browser / PDF Generator an, jedesmal wenn etwas Bold dargestellt wird, die Schrift "fontBO" zu verwenden.

Dieser Trick funktioniert auch mit Italic Schriftschnitten:

Code: Alles auswählen

em,i,em span, span em {     font-family: "fontIT";     font-weight: normal;     font-style: normal; }
Damit sind die Schriften vollständig in PROAD, CKEditor und für die Verwendung mit dem PDF Generator eingebunden.



Bekannte Probleme

Lizenzen

Einige Schriften haben ein Lizenzmodell das es evtl. nicht erlaubt die Schrfiten zu manipulieren oder auf PROAD Art zu verwenden. Hier gibt es nur eine Lösung: den Kontakt mit dem Schrifteninhaber suchen bzw. den Lizenzgeber kontaktieren und nach einer Lösung fragen.

Webfonts

Auch Webfonts können nicht funktionieren und zwar wenn diese ebenfalls längere Namen und der gleichen Schriftenfamilie zugewiesen sind.

Wir empfehlen IMMER alle Fonts herunterzuladen und die Schrift wie oben beschrieben anpassen und einbinden.

Arial unter Windows

Die Schrift Arial hat ein Problem mit dem Zeichenabstand. Hier kann im Dialog [Einstellungen -> Dokumentvorlagen] im Tab "Layout Dokument" der Zoomfaktor helfen. Gute Ergebnisse sind bisher mit der Einstellung 1.67 erreicht worden.

macOS Yosemite

PROAD unterstützt unter macOS Yosemite und ältere macOS Versionen nicht die @font-face Notation.

Lösung: macOS Upgrade auf macOS Sierra.

Adobe Acrobat Reader

Wenn Schriften in Dokumenten unsauber ausgegeben werden kann es Helfen die erzeugten PDF Dateien mit dem Adobe Acrobat Reader zu öffenen. Dieser ist der Standard für das PDF Format und interpretiert manche Eigenarten besser als die browserinternen Anzeigeprogramme.

Trouble Shooting
  • Prüfen ob der Font herunterladbar ist. Dafür in die Grundeinstellungen die Font in der Fontliste suchen, die URL aus dem Font-CSS in einem separatem Browsertab eintragen und den Font herunterladen.
  • Im Font-CSS prüfen ob die URL dieselbe ist wie PROAD geladen wird.
  • Den Font in FontForge öffnen und schauen ob der Name max. 8 Zeichen lang ist und die Fontfamily und der Fontname gleich ist.
  • Prüfen ob die Fontfamily im Font-CSS genauso heißt wie in der Fontliste und auch im Dokument.
  • Falls Schriftschnitte nicht funktionieren muss geprüft werden ob diese als Hauptschrift für das Dokument funktionieren. Hierfür einfach die Fontfamily des Dokuments austauschen mit der des Schriftschnitts. Falls dies nicht funktioniert die vorherigen Punkte prüfen.
  • Schriftschnitte werden am besten über CSS mit "strong,b" bzw. "em,i" Regeln eingebunden.