Text Größe font-size auto

1. offizieller Beitrag

    Hallo liebe Community,

    ich hoffe ihr könnt mir bei meinem Problem helfend

    Auf meiner Page habe ich mit großer Schrift "Willkommen" geschrieben.
    Auf dem PC stimmt die Schriftgröße

    Wenn ich jetzt aufs Tablet oder Telefon die Seite öffne wird mit die Schrift 2-zeilig angezeigt.

    Gibt es eine Möglichkeit von Autoscale der Schrift - D.h. Wenn das IE-Fenster verkleinere dass er mir auch die Schrift automatisch verkleinert.

    <h1 style="text-align: center;"><strong><span style="color: #008000; font-size: 1em;">W i l l k o m m e n</span></strong></h1>

    Danke für die Hilfe
    Christian

    Hallo

    Grundsätzlich solltest du HTML5 und CSS3 verwenden.

    Dann sollte der viewport für hochauflösende Displays vorgegeben werden, zum Beispiel

    Code
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Dazu gehört unter anderem auf Inline-CSS, veraltete HTML-Attribute und unnötige Elemente zu verzichten. Also

    Code
    <h1><Willkommen</h1>

    Das Styling wird dann per CSS erledigt. Du lieferst leider zu wenig Informationen um dir eine konkrete Lösung bieten zu können. Am besten wäre ein Link zu der Seite.

    Wenn die Seite besucherfreundlich daherkommen soll, sollte die Schrift mindestens 20px groß sein. 16px ist zwar die übliche von den Browsern vorgegebene Größe, wird aber von vielen Besuchern als zu klein empfunden. Dies gilt speziell auch für Smartphones und Tablets die häufig zum Lesen nicht stabil justiert werden können, zum Beispiel in Bus und Bahn oder im Auto.

    Die Wortbreite kann durch verschiedene Maßnahmen beeinflußt werden, wobei auch Responsive Design mit Media Queries verwendet werden sollte. Beispielsweise

    • Anpassen der Außenabstände (padding, border, margin)
    • durch Anpassung der Buchstabenabstände
    • Ändern der Schriftart
    • Stufenweises Ändern der Schriftgröße
    • Flexibles Ändern der Schriftgröße

    Was davon am sinnvollsten ist hängt von deiner restlichen Webseite ab.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (19. Juli 2016 um 07:14)

    Hallo MrMurphy,

    danke für die schnelle Antwort.

    Ich verwende Wordpress mit der Vorlage: TwentyTwelve und bei der Erstellung habe ich mit den WYSIWYG-Editor gearbeitet daher diese Darstellung.
    Homepage ist leider noch nicht online, daher ist ein Link nicht möglich.

    Wie würde in diesem Fall die CSS für h1 ausschauen?

    Schöne Grüße
    Christian

    Hallo

    Zitat

    Wie würde in diesem Fall die CSS für h1 ausschauen?

    Um deine Darstellung mit dem HTML

    Code
    <h1>Willkommen</h1>

    zu erreichen würde das CSS folgendermaßen aussehen:

    Code
    color: #008000;
font-size: 1rem;
text-align: center;
font-weight: 800;
letter-spacing: 0.35rem;

    Über Media Queries kannst du den Buchstabenabstand bei schmalen Fentergrößen zurücksetzen. Für weniger als 500px Fensterbreite könnte das dann so aussehen:

    Code
    @media only screen and (max-width: 500px) {
      h1 {
         letter-spacing: 0;
      }
   }
    Zitat

    Ich verwende Wordpress

    Mit Wordpress kenne ich mich leider nicht aus. Weißt du denn überhaupt wie du dort individuelles CSS mit Media Queries einfügen kannst?

    Gruss

    MrMurphy

    Die CSS passe ich immer über z.b: Notepad++ an. Das es über den Editor von WP geht - weiß ich leider nicht.
    HTML und CSS Kenntnisse liegen teilweise vor - Aber nur sehr begrenzt

    • Offizieller Beitrag

    Ok, aber dann solltest Du es wie MrMurphy gesagt hat machen.
    InlineCSS weglassen und komplett meiden, dafür richtiges CSS verwenden.

    Wenn Du an bestimmten Stellen nicht weiter kommst, darfst Du sicher gerne wieder hier fragen, nehme ich an ( gerne mit den von Dir angestellten Versuchen )... ;)