TEXT IN WEBACAPPELLA RICHTIG FORMATIEREN!

WebAcappella ist ein gutes Programm, nur lässt die Formatierung von Texten im Projekt stark zu wünschen übrig. Auch wenn man in WebAcappella Webschriften nutzen kann, so ist der Rest doch sehr dürftig. Schaut man auf die Seite des Herstellers und betrachtet man sich den Quellcode der Seite, dann wird man schnell fündig und sieht, dass der formatierte Text auf der Seite über HTML-Bausteine gelöst ist. Dieses setzt im Normalfall Erfahrung in CSS und HTML heraus, jedoch geht es auch einfach.

Wenn man Webschriften auf der Seite nutzen möchte, dann bindet man diese im Vorfeld mit dieser Anleitung ein.

Mit diesem Web-Generator kann man sich seinen Wunschtext so formatieren, dass dieser seinen Vorstellungen entspricht. Im Textfeld auf der Seite, fügt man seinen gewünschten Text per Copy und Paste ein und formatiert diesen dann über die diversen Einstellungsmöglichkeiten auf der Seite.

Bildschirmfoto 2014-03-14 um 14.45.01

Nachdem die Einstellungen für die Textformatierung erledigt sind, klickt man auf Get css codeum den Code für den HTML-Baustein zu erhalten.

Bildschirmfoto 2014-03-14 um 14.49.05

Diesen kopiert man und fügt den Code dann im Programm in einem HTML-Baustein auf der Seite ein.

Bildschirmfoto 2014-03-14 um 14.52.08

Nutzt man websichere Schriften und hat den Schrifttyp im Generator eingestellt, dann braucht man den HTML-Baustein nur noch richtig zu positionieren und in der Grösse anzupassen. Nutzt man hingegen Webschriften, dann muss man im Code noch den Schrifttypen und die Schriftstärke deklarieren. Hierzu sucht man in den Stylevorgaben nach dem Schrifttyp „font-family:arial,“ und Schriftstärke „font-weight:normal;„. Hat man nun über die Webschrift zum Beispiel die Schrift Roboto eingebunden und möchte die Stärke von 100 (dünn) nutzen, dann ändert man die Parameter im Code nach den eigenen Wünschen ab.

In unserem Beispiel sehe dieses dann so aus:

  • Schrifttyp – font-family:Roboto
  • Schriftstärke – font-weight:100

HINWEIS:
Die gewünschte Schriftstärke muss im Vorfeld auch beim Code von Google Webfonts berücksichtigt werden, damit die Einstellung auch funktioniert!

Be the first to comment.

Leave a Reply