Lehrplan
Kurs: Rettet die Bienen! - Expedition ins Inte...
Anmeldung

Curriculum

Rettet die Bienen! - Expedition ins Internet

Einführung

0/2

WWW

0/3

Planung

0/4

Inhalte

0/13

Style

0/3

Finale

0/1
Textlektion

1.24 CSS: Schriftarten

Fonts

Die Auswahl der Schriftart (Font) hat eine große Auswirkung darauf, wie deine Webseite wahrgenommen wird. In CSS können die Schriftarten so geändert werden:

tag {
   font-family: "Schriftart";
}

Richtig eingesetzt, kann deine Schriftart auch zu einem “Markenzeichen” deiner Webseite/Initiative werden. Dir ist das vielleicht auch schon auf anderen Webseiten aufgefallen. Schau dir z.B. mal die Überschriften auf der Webseite von Mercedes-Benz an. Erkennst du, wie sich die Schriftart einheitlich durch die ganze Seite zieht, und obwohl sie relativ schlicht ist, trotzdem einen “Wiedererkennungs-Charakter” hat?

Probier doch mal aus, wie es aussieht, wenn du die Schriftarten auf deiner Webseite änderst. Du kannst erstmal mit den Schriftarten unten anfangen. Später kannst du dann auch noch beliebig andere Schriftarten verwenden oder sogar die unbegrenzte Vielfalt von Google Fonts entdecken gehen.

Lucida Handwriting
Impact
Helvetica
Papyrus
MV Boli

Auf der Webseite von TutorialBrain findest du eine rießige Liste mit unterschiedlichen Fonts.

Möchtest du nooooch mehr.. dann bist du bei Google Fonts genau richtig!

Unter https://fonts.google.com/ findest du unzählige Schriftarten.

Achtung: Damit du die Schriftwarten verwenden kannst, musst du zuerst deiner Datei sagen, welche Google Fonts du verwenden möchtest. Das geht so (Erklärvideo unten):

  1. Wähle eine Schriftart aus.
  2. “Select this style”
  3. Wähle rechts “@import” aus.
  4. Kopiere alles zwischen den style-Tags in deinen Stylesheet.
  5. Unter “CSS rules to specify families” findest du den CSS-Code, den du vernwenden musst, um die Schriftart zu ändern.

See the Pen WEB_24_Beispiellösung by RockStartIt (@RockStartIt) on CodePen.

Hinweis: Klicke auf den -Button, damit die Ansicht aktualisiert wird und alles richtig angezeigt wird.

1. Geschweifte Klammer “{” und”}”

Für “{” drücke “alt gr+7”. Für “{” drücke “alt gr+0”.

2. Strichpunkt “;”

Drücke “shift+,”.

3. Kopieren und Einfügen

Oft ist es nützlich Texte oder Elemente einfach zu kopieren. Markiere dafür den Text mit der linken Maustaste. Drücke dann die Tasten “strg”+”c”. Klicke dann an die Stelle, wo der Text eingefügt werden soll. Drücke dann die Tasten “strg”+”v”.

Bild von Tastatur

4. Tags: “<” und “>”

Für “<” drückst du nur die Taste rechts oben von “Strg”. Für “>” drückst du “Shift+<“. “Shift” ist die Taste direkt oberhalb von “Strg”.

5. Schrägstrich “/”

Für “/” drückst du “Shift+7”.

6. Anführungszeichen “:

Drücke “Shift+2”.

Falls du dein Codepen-Fenster versehentlich geschlossen hast, oder deine Arbeit aus einem anderen Grund verloren gegenagen ist, kannst du hiermit weiterarbeiten. Klicke einfach auf den folgenden “Codepen”-Button. Es wird sich ein neues Codepen-Fenster öffnen, indem du weiterarbeiten kannst.

Welche Schriftart passt zu welchem CSS Abschnitt? Probiere es einfach mal auf deiner Webseite aus!

.

.

.

.

.

.

.

Bla Bla Blaa...

Bla Bli Blub...

Bli Blub Blaaaa...

Layer 1