Howto zum Thema Schriftarten (Fonts) für Webseiten

Schriftarten (Fonts) für Webseiten

Wie im Blog Artikel beschrieben, habe ich mehrere deutschsprachige und internationale Webseiten besucht und mir die verwendeten Schriftarten (Fonts) aufgeschrieben. Nachdem ich einige Versuche mit einem "Liquid Layout", also ein flexibles und skalierbares Layout, unternommen habe, wurde mir das zuviel immer die Schriftarten in der CSS Datei auszutauschen. Die Liste "<font-family> Schriftarten" ermöglich mir das mit jedem Browser und Betriebssystemplattform viel schneller.

<font-family> Schriftarten (font-size: 1em;)

1. Das ist ein Beispieltext ohne Sinn (Verdana)
2. Das ist ein Beispieltext ohne Sinn (Arial)
3. Das ist ein Beispieltext ohne Sinn (Sans-serif)
4. Das ist ein Beispieltext ohne Sinn (Trebuchet MS)
5. Das ist ein Beispieltext ohne Sinn (Bitstream Vera Sans)
6. Das ist ein Beispieltext ohne Sinn (Tahoma)
7. Das ist ein Beispieltext ohne Sinn (Georgia)
8. Das ist ein Beispieltext ohne Sinn (Helvetica)
9. Das ist ein Beispieltext ohne Sinn (Courier)

CSS Part:

  body {
    font-size: 82%;
  }
  
  .byfarlists {
    font-size: 1em;
    line-height: 1.4em;
    color: #333333;
    background-color: #ffffff;
    padding-bottom: 2em;
  }
  

(X)HTML Part:

  <ol class="byfarlists">
    <li style="font-family: Verdana;">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: Arial;">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: sans-serif;">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: 'Trebuchet MS';">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: 'Bitstream Vera Sans';">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: Tahoma;">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: Georgia;">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: helvetica;">Das ist ein Beispieltext ohne Sinn</li>
    <li style="font-family: courier;">Das ist ein Beispieltext ohne Sinn</li>
  </ol>
    

zur Navigation

Nach oben