Schriftgröße an Breite anpassen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
w3j

w3j hat kostenlosen Webspace.
11:37, 19.8.2014
Hi, ich wollte mal fragen ob man (wenn möglich nur mit css) die Schriftgröße an z.B. die Breite eines div Containers anpassen kann. Das man z.B. sagt:
```
Schriftgröße(-breite) = Breite-des-div*70%
```
Im Internet konnte ich aber nichts dazu finden wie man mit css (wenn nicht möglich mit js) die Schriftbreite einstellt.
Hoffe ihr habt verstanden was ich meine
w3j
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
burgi

Co-Admin

burgi hat kostenlosen Webspace.

12:51, 19.8.2014
Nach meiner Recherche ist das mit CSS alleine nicht möglich.
In Verbindung mit JavaScript sollte das allerdings möglich sein, siehe hier:
http://fittextjs.com/

mein-wunschname hat kostenlosen Webspace.

12:52, 19.8.2014

Ja, so etwas ähnliches gibt es in der CSS3-Spezifikation. Ich habe hier mal ein kleines, ganz einfaches Beispiel gemacht:

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>Dynamische Anpassung der Schriftgröße</title>

    <style>
        h1 {
            font-size: 6.0vw;
        }
        .dynamisch > h2 {
            font-size: 4.0vw;
        }
        .dynamisch > p {
            font-size: 2.0vw;
        }
    </style>

</head>

<body>


    <div id="wrapper">

        <h1>Dynamische Anpassung der Schriftgröße</h1>

        <section>
            <div class="dynamisch">

                <h2>Diese Schriftgröße passt sich dynamisch an</h2>

                <p>Diese Schriftgröße passt sich dynamisch an</p>
                <p>Diese Schriftgröße passt sich dynamisch an</p>
                <p>Diese Schriftgröße passt sich dynamisch an</p>
                <p>Diese Schriftgröße passt sich dynamisch an</p>
                <p>Diese Schriftgröße passt sich dynamisch an</p>
                <p>Diese Schriftgröße passt sich dynamisch an</p>
            </div>
            <div class="statisch">
                <h2>Diese Schriftgröße passt sich nicht an</h2>

                <p>Diese Schriftgröße passt sich nicht an.</p>
                <p>Diese Schriftgröße passt sich nicht an.</p>
                <p>Diese Schriftgröße passt sich nicht an.</p>
                <p>Diese Schriftgröße passt sich nicht an.</p>
                <p>Diese Schriftgröße passt sich nicht an.</p>
                <p>Diese Schriftgröße passt sich nicht an.</p>
            </div>

        </section>

</body>

</html>

Du siehst, dass ich an Stelle der üblichen Angaben für Schriftgrößen die "komische" Maßeinheit vw verwendet habe. So bedeutet

font-size: 6.0vw;

"Stelle die Schriftgröße auf 6% der sichtbaren Breite des Browserfensters" (viewport). Zu beachten ist, dass dieses Feature bei älteren Browsern nicht funktioniert. Ich habe mein Beispiel mit IE11, FF 31 und Chrome 36 getestet - jeweils ok.
Eine Übersicht zur Browserunterstützung und zu ähnlichen "Größeneinheiten" (vh,vmin,vmax) und nach viele Links findest du auf http://caniuse.com/#feat=viewport-units

Autor dieses Themas
w3j

w3j hat kostenlosen Webspace.

13:03, 19.8.2014
Vielen Dank hatt mir beides sehr weitergeholfen.
w3j
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city