Um den gesamten Text auf dem Lieferschein auf die gleiche Weise zu gestalten, gehen Sie zur Lieferscheinvorlage in Ihren Vorlageneinstellungen und fügen Sie den folgenden Code am Anfang des Abschnitts Auftragskopfzeile ein:
<style>
* {
font-size:14px;
font-family: Georgia, serif;
color: #4f4f4f;
}
</style>
Der * ist ein globaler Selektor. Der obige Code legt die Größe für den gesamten Text auf dem Lieferschein auf 14 px fest, die Schriftart auf Georgia (oder, wenn Georgia keine verfügbare Schriftart ist, auf die Standard-Serifen-Schriftart) und die Farbe auf den Hex-Wert 4f4f4f (Dunkelgrau).
Ändern Sie die Werte für font-size, font-family und color auf die von Ihnen gewünschten Werte.
Um nur ein bestimmtes Element des Textes anstelle des gesamten Lieferscheins zu gestalten, fügen Sie das Style-Attribut zum gewünschten Element-Tag hinzu (dieses Beispiel fügt die gleichen Textoptionen wie oben zum <p>-Tag für die Lieferschein-Nachricht hinzu):
<p align="center" style="font-size:14px; font-family: Georgia, serif; color: #4f4f4f">[Packing Slip Message]</p>
Fügen Sie dazu den fettgedruckten Text aus dem obigen Beispiel in Ihren Lieferschein-Code ein und ändern Sie die Werte für die einzelnen Styles nach Bedarf.
Um die Schrift im obigen Beispiel fett zu machen, fügen Sie einfach die Eigenschaft font-weight zum Style-Attribut hinzu:
style="font-size:14px; font-weight: bold; font-family: Georgia, serif; color: #4f4f4f"
Sie können viele Eigenschaft- und Wertepaare zu Style-Tags hinzufügen, entweder in der Zeile für ein einzelnes Element oder zwischen <style>-Tags am Anfang des Lieferschein-Codes, um den gewünschten Effekt zu erzielen.
Hier sind die beliebtesten Ergänzungen für ein Style-Attribut:
-
Fett
font-weight: bold;
-
Kursiv
font-style: italic;
-
Unterstrichen
text-decoration: underline;
-
Eine Markierungsfarbe zum Hintergrund des Textes hinzufügen
background-color: yellow;
-
Textfarbe zu Rot ändern
color: red;
-
Die Schriftgröße auf 18 Punkt ändern
font-size: 18pt;
Um Text in einem Element zu ändern, aber nicht den gesamten Text in einem Element, müssen Sie <span>-Tags hinzufügen.
Markieren Sie zum Beispiel den Text „30 Tage“ in diesem Beispielsatz rot mit gelber Hervorhebung und kursiv, aber lassen Sie den umgebenden Text unverändert.
So sollte dies in der Fußzeile Ihres Lieferscheins aussehen:
<p align="center" style="font-weight: bold; font-size: 11px">Return items within <span style="font-style: italic; text-decoration: underline; background-color: yellow; color: red;">30 days</span> for a full refund.</p>
Weitere Informationen zum Formatieren von Textelementen wie diesem finden Sie auf den Tutorial-Seiten zu W3Schools oder Mozilla Developer Network.