Schriftform und Größe genau anpassen (Block)

[Tuer_Knauf]

Hallo,

ich hab ein Problem, ich hab eine Vorlage für eine kleine Website bekommen.

Problem ist aber das es sich dabei nur um ein .jpg handelt, welches mit Photoshop oder InDesign erstellt wurde.
Auf dem Bild befindet sich Schrift, die so auch auf der Website dargestellt werden soll.
Im Anhang habe ich mal ein Bsp. dazu!

Man sieht 3 Zeilen, welche gleich breit sind, allerings bestehen sie aus unterschiedlich vielen Buchstaben.
Ich könnte den text als Bild einsetzen aber das sieht erstens nicht gut aus und ist ja auch nicht sinn und zweck der Sache.

Hat jemand eine Idee wie das mit html oder irgendwie sonst realisierbar ist?
Ich hab mir schon die Finger wund gegoogelt und nichts dazu gefunden.

Danke schonmal für eure Hilfe!

Gruß

 

[threadi]

Die CSS-Eigenschaften zur Definition von Schrifteigenschaften sollten für dich interessant sein:
CSS Text
Tryit Editor v1.5
...

Natürlich geht das nicht mit HTML da für derartige Gestaltungen CSS gedacht ist.

Moderation: Verschoben von HTML zu CSS.

 

[Tuer_Knauf]

Super, ich danke dir! Ich werd mal ein wenig rumbasteln und versuchen. Wenn es probleme gibt oder ich es geschafft haben sollte geb ich nochmal bescheid. Danke für die Hilfe ;-)

 

[Tuer_Knauf]

Und hier hab ich schon das nächste Problem :(

Mit den Überschriften tags ist das ja erstmal nicht schlecht, allerdings gibt es nur 6 und ich bräuchte 10.
Ausserdem ist der abstand Zwischen den zeilen nicht optimal, wobei das sicherlich auch mit css zu lösen wäre...
Ich hab mal auf der Seite ein wenig geschaut aber nichts genaueres gefunden.

Wenn noch jemand eine Idee hätte wäre das super :-)

Grüße

 

[b4ttl3m4st3r]

Spontant fällt mir dazu nur "letter-spacing" oder "Schriftgröße berechnen durch Script" ein.

<div style="width:300px;">
    <div style="text-align:center;text-transform:uppercase;font-size:20px;font-weight:bold;">Maler- & Lackierarbeiten</div>
    <div style="text-align:center;text-transform:uppercase;font-size:16px;letter-spacing:1px;">Innen- & Fassadengestalltung</div>
    <div style="text-align:center;text-transform:uppercase;font-size:16px;letter-spacing:2px;">W&auml;rmed&auml;mmverbundsysteme</div>
</div>

 

[prm]

Die 6 Standardüberschriften sind hierchisch gedacht, ähnlich einer Gliederung, z.B.

1. Thema (h1)
1.1 Unterthema (h2)
1.1.1 Unter-Unterthema (h3)
usw.

Formatieren kannst du deine Überschirften beliebig und in beliebiger Anzahl indem du ihnen eine gesonderte Klasse zuweist.
Beispiel:

<h1 class="rot">rote Überschirft</h1>

.rot {color: red;}

Die Zeilenhöhe kannst du mit der Eigenschaft "line-height" regulieren.