[CSS] Schrift automatisch anpassen

Dieses Thema im Forum "Webdesign" wurde erstellt von Schnee, 8. März 2010 .

  1. 8. März 2010
    Schrift automatisch anpassen

    Hallo,

    mal ne Frage. Ich habe die Auflistung der News auf der Startseite (Wordpress, obwohl das Script egal ist, geht ja um CSS, denke ich) und habe folgenden Code in der CSS:

    HTML:
    #content h1 {
     color: #333333;
     font-size: 17px;
     font-family: verdana, arial, times new roman;
     font-weight: bold;
     margin: 0px 0px 10px 0px;
     padding: 5px 0px 5px 0px;
     border-top: 1px dotted #C0C0C0;
     border-bottom: 1px dotted #C0C0C0;
     }
    
    Ist es möglich, das bei längeren Titeln die eigentlich in die zweite Zeile mitrutschen es so zu machen, das sich die Schrift auf die passende Zahl "anpasst", die reicht um sie in einer Zeile darzustellen und wenn der Titel kürzer als der mögliche Platz ist sich die Schriftgröße auf maximal 18px zu vergrößern?

    Also das er zwischen 11px und 18px font-size varriert. font-size 100% glaub ich kaum (habs aber auch noch nicht gestetet).

    Oder garnicht möglich? Eigentlich ja schon irgendwie, oder greift da schon wiedermöglichweiße Javascript ein?

    Danke für Antworten
     
  2. 8. März 2010
    AW: Schrift automatisch anpassen

    Ich glaube nicht dass das noch mit css möglich ist, da musste schon mit javascript arbeiten
     
  3. 8. März 2010
    AW: Schrift automatisch anpassen

    Code:
    <h1 id="h1">xxx</h1>
    
    <script type="text/javascript">
     var h1el = document.getElementById("h1");
     var zeichenlang = 3; // hier deine länge eintragen
     if (h1el.innerHTML.length > zeichenlang){
     h1el.style.fontSize = '11px';
     }
    </script>
    
    // edit
    bedenke, wenn JS aus, dann geht das nicht mehr
     
  4. 8. März 2010
    AW: Schrift automatisch anpassen

    kleine Anmerkung:
    Beachte beim Testen, ab wann die Zeile umbrechen würde, dass die meisten Schriftarten verschieden breite Buchstaben haben.
    Meist ist ein "W" breiter als beispielsweise ein "i" - außer bei dicktengleichen (heißt so, oder?) Schriften.
    Also am Besten diese Variationen mit einrechnen.
     
  5. 8. März 2010
    AW: Schrift automatisch anpassen

    Ich weiß was du meinst, habe es mir passendes genau auf den Pixel angepasst
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.