Frau Kalke's Blog - Comcave: Kurs Tag 14 - HTML & CSS - CSS: Schriften in CSS einfügen, Größenangaben (em, px...)

Mitschrift 25.04.2014

TAG 14

Schriften in CSS einfügen

Es gibt 2 Möglichkeiten Schriften, die nicht automatisch im System sind, wie arial, sans-serif, helvetica... in die CSS-Datei einzufügen.

2 Möglichkeiten Schriften einzubauen:

1) Webfonts / Google Schriftarten

Ich nutze die Schrift referenziert!!! (also mit Link oder @import)

interne Schriftverlinkung über link-Tag
Bewährte Methode: Dozent bevorzugt diese Methode, da CSS nur Formatieren soll und Referezierungen in den Head-Bereich der HTML-Datei gehören!!!
<link rel="stylesheet" href="css/template.css" type="text/css" />
habe sie nicht auf der eigenen Seite, sondern mit der URL oder über einen Link verbunden.
Risiko: Falls der Dienst abgestellt wird oder die Links ändert, ist meine Schrift weg.

=> Einfügen über einen Link im Head-Bereich des HTML-Dokuments:

gehe zu Google Webfonts
eine Schrift auswählen durch Button "Add to Collection": Patrick Hand SC

unter 1. Choose the style:
Tachometer zeigt an, inwiefern die Schrift unser Lageverhalten verändern kann

unter 3. add this code - Standard!
Inhalt der Reiterkarte kopieren und im Head meines Dokumentes angeben/einfügen.

Hinweis: Ein Link-Tag! = wir referenzieren auf die google Fonts Seite:
<link href='http://fonts.googleapis.com/css?family=Sofadi+One|Patrick+Hand+SC' rel='stylesheet' type='text/css'>
ERGO: Wir importieren stylesheet aus einer anderen Quelle.

unter 4. Integrate the fonts into your CSS
Dann muss ich es in mein im Headbereich meines HTML-Dokumentes einfügen UND auch in meinem CSS-Dokument, wie weiter unten angegeben!

Den Code kopieren & im Headbereich eintragen

Headbereich im Quelltext:

<!doctype html>
<html>
   <head>
       <title>Web Fonts</title>

       <link href='http://fonts.googleapis.com/css?family=Sofadi+One|Patrick+Hand+SC' rel='stylesheet' type='text/css'>


<link rel="stylesheet" href="css/template.css" />

   </head>

CSS-Angaben im CSS-Dokument:

       *{
            font-family: 'Patrick Hand SC', verdana, helvetica, arial, sans-serif;
            font-weight: 300;
       }

Tipp: Damit ich nicht alle Elemente definieren muss, für die die Schrift gilt, stelle ich die Schrift in einen Globalselektor!

Globalselektor: * {font-family angeben!!!}

anderes Beispiel - andere Schrift mit mehreren Styles (Strichstärken)

Schrift Dosis hat 7 Styles (mit verschiedenen Strichstärken)

Hinweis: ich kann für alle Schriften die Strichstärke verändern:

mit font-weight: 800; kann ich die Strichstärke verändern - also den Text fetter und dünner schreiben lassen.
CSS4YOU > Schrift > font-weight

Der Browser interpoliert (frischt auf), wenn wir die Schriftbilder und Strichstärken verändern.

ABER: Immer wenn der Browser interpolieren muss, also die Schriften nicht physikalisch vorliegen, kann es Probleme geben, bspw. wenn man in pdf konvertiert etc.

ERGO: es macht Sinn, sich eine Schrift zu besorgen, die alle möglichen Schriftstärken abbilden kann, damit es später keine Probleme gibt.

=> Einfügen über die @import Angabe im CSS-Dokument:

Exkurs:
In CSS gibt es eine Besonderheit:
@ Klammeraffe: hier wird etwas importiert / implementiert
Beispiele: @font-face, @print, @media

=externe Schriftverlinkung!!!

gehe zu google Webfonts
suche eine Schrift aus durch "Add to collection" (Open Sans Condensed)
klicke auf "Use"
bei 3. den zweiten Reiter @import wählen!

Haken bei light 300 - genügt
@import-link kopieren
Link in CSS-Datei einfügen
Sichwerheitshalber den Link mit einfache Anführungszeichen 'link' quotieren!!!

also: @import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

So wird erstmal keine Schrift angezeigt, ich muss sie erst VERWENDEN!!!
jetzt verwenden durch Angabe im Globalselektor!

steht unter 4. in den Google Web-fonts in der Use-Ansicht - kopieren& einfügen!

Pluszeichen sind immer Leerzeichen!
Grundsätzlich mit font-weight eine Strichgröße benennen!!!!!
Angaben im CSS:

@import url ('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

        *{
        font-family: 'Open Sans Condensed', verdana, helvetica, arial, sans-serif;
        font-weight: 300;
        }

Hinweis:
die @import-Methode geschieht durch Verbindung mit einer URL
Das hat den Vorteil, dass es nicht nur über einen bestimmten Link, wie beim Standard-Einfügen geschieht (dieser kann kaputt gehen und schon ist die Schrift nicht mehr vorhanden).

URL: Ich kann mir den Link/ die Adresse rauskopieren und im Browser öffnen
-> so bekomme ich die CSS-Angaben angezeigt:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'),

url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/

v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff)

format('woff');
}

-> hier werden uns die CSS-Angaben von Googlefonts angezeigt durch Implementierung @font-face und somit haben wir die Schleife zur 2. Möglichkeit der Schrifteneinbindung gezogen:
Einfügen von heruntergeladenen Schriften!

2) Dafont oder andere Schriftportale

ich lade die Schrift herunter!
Einbetten einer heruntergeladenen Schriftdatei in meine CSS-Datei
Dafont hat den Vorteil, dass ich mir die Schrift physikalisch in meinen Schriftenordner laden kann - also auf meinem Rechner/Server liegen habe!
Dann füge ich die Schrift über @font-face ein

Schriften mit @font-face einbinden - so geht's!

a) @font-face {} in mein CSS einfügen
b) font-family: 'Foxes-In-Love' ; in @font-face eintragen

wir definieren den Verwendungsnamen der Schrift - Wir müssen angeben, wie die Schrift heißt => Hier kann ich jeden Namen vergeben!!! z.B. Standardschrift oder so, woie mein Unternehmen

c) src: URL ('Foxes In Love Font.ttf');

URL sagt aus, dass eine relative Pfadangabe folgt!
es ist eine physikalische Schrift - hier wird angegeben, wo sie liegt, damit der Browser sie finden und anwenden kann.
wir verknüpfen die physikalische Schrift mit dem Dokument
für die Quelle muss ich gucken, wo meine HTML-Datei steht und dann den relativen Pfad angeben also bspw.: template.css steht im Ordner CSS in Tag 14 - Ordner Fonts im selben Tagesordner:
src: url( '../fonts/'Foxes In Love Font.ttf');
Jetzt ist die Schrift erst implementiert - bis hierhin wurde nur der Name definiert und die Quelle angegeben.

d) Jetzt müssen wir die Schrift verwenden!!!

am Besten über den Globalselektor:

* {font-family: 'Foxes In Love Font'.ttf, verdana, helvetica, sans-serif; font-weight: 200;}

Erst font-family-Angaben im CSS wird die Schrift verwendet/aktiv!!!

Quelltext in CSS:

@font-face {
            font-family: 'Foxes-In-Love';
            src: url('../fonts/Foxes-In-Love.ttf');
        }

        *{
            font-family: 'Foxes-In-Love', 'Open Sans Condensed', verdana, helvetica, arial, sans-serif;
            font-weight: 300;
        }

Allgemeine Hinweise zu Schriften:

Dateiendungen für Schriften
wir unterscheiden nach TruType- und OpenType-Schriften!
-> bitte selber nachlesen:

Open-Type-Schrift : .otf
True-Type-Schrift: .ttf

Warum Schrift in ''?
Die üblichen Schriften sind im System verankert - der Browser kennt sie. Aber die neuen Schriften kennt das System nicht. mit den einfachen Anführungszeichen helfen wir dem Browser den Schriftnamen zu erkennen. Teilweise heißen die Schriften "Schrift bold" - würden wir ohne '' schreiben, würde er nicht wissen, ob nun Schrift oder bold die SChrift ist.

Deshalb auch keine Leerzeichen verwenden.
ALSO IMMER DIE LEERZEICHEN IN DEN SCHRIFTEN DURCH -(Bindestriche) oder _(Unterstriche) ersetzen!!!

ERGO: Vereinheitlichung ist wichtig: Entscheiden Sie sich für eine Einfügungsmethode!!!
Die Link-Methode hat sich bewährt!

Aufgabe: über die Link-Funktion oder/und @import-Funktion eine Schrift einfügen!

DATEI: font-import.zip erhalten -> können wir als Vorlage nutzen!
hier sind template dateien zu finden, wie die Vorgehensweisen bei googlefonts und über @font-face aussehen.

Hinweis für die Realität:
Man kann über @font-face mehrere Schriften einfügen ins Dokument, aber in der Realität macht man das besser nicht - warum?

Weiter geht es mit Größenangaben / Schriftgrößen

Link zu SelfHTML
->weg von absoluten zu relativen Schriftgrößen

absolute Schriftgrößen:

nicht skalierbar
schwer zu vergrößern
Früher haben wir mit pt (Punkt gearbeitet - absolut: 1 Punkt = 1/72 inch - ein inch = 2,54cm)

relative Schriftgrößen

px = Pixel (Mischform aus absolut und relativ) - keine echte relative Schriftgröße, da in Relation
em = equal to M (Geviert im klassischen Sinne des Drucks)

relative Größenangabe bezogen auf die Schriftgröße des Elements

Neue Datei: groessen.html

h1 {}
Die Relation geht immer von der Standardeinstellung des Browsers aus!
Herauszufinden über den Firebug:
rechte Seite - Berechnet: hier wird angegeben, was 100% bedeutet:

wir können auch andere &-Angaben machen

und sogar Dezimalzahlen angeben:

Welche Vorteile hat es relative Größenangaben zu machen?
Es ist egal, welches Endgerät ich nutze - Responsive! Super, weil die Leute sowohl vom Smartphone, als auch über Tablets und Rechner ins Netz gehen!
Der Browser skaliert sich automatisch richtig!
ERGO: Die Darstellung passt immer zum Gerät!

Bootstrap wird häufig als CSS-Hilfe verwendet!
(Werbeslogan: Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.)

Linktipps (Datei: links-css.txt) :
# CSS allgemein
http://www.mediaevent.de
http://www.postner.de/blog/2011/08/10/css-box-shadow-an-einzelnen-seiten/

# Effekte CSS3
http://www.onlinecasinodemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/

# IE Filter
http://www.drweb.de/magazin/internet-explorer-spezial-die-filter-des-internet-explorers/

# px oder em
http://www.elmastudio.de/webdesign/tipps-und-tools/pixel-oder-em-welche-schrifteinheit-ist-die-richtige/ - diesen Beitrag bitte lesen = Aufgabe!

Hier ein Zitat elmastudio.de:

Pixel oder em? Welche Schrifteinheit ist die Richtige?
Soll ich Pixel oder em für mein CSS verwenden? Was sind eigentlich die Unterschiede? Und welche Vor- und Nachteile gibt es? Da ich ursprünglich aus dem Grafikdesign komme, war mir früher eigentlich nur Punkt (pt) als Schrifteinheit geläufig. Im Webdesign begegneten mir dann auf einmal Pixel (irgendwie noch logisch), em (schon etwas komplizierter) und Prozent als weitere Einheiten. Es war also mal wieder an der Zeit, etwas Neues dazu zu lernen.

Falls es dir ähnlich geht wie mir, hier eine Übersicht, die ein wenig Licht ins Dunkel bringen soll. Damit dir die Entscheidung für eine Schrifteinheit, bei deinem nächsten Projekt auf keinen Fall mehr Kopfzerbrechen bereitet.

Pixel (px)
Ein Pixel ist die kleinste Einheit einer Rastergrafik, bzw. deren Bildschirmdarstellung. Eine Schrift in 14px, ist also auf deinem Monitor 14 Pixel hoch, ganz egal welche Schriftart du verwendest.

Pixel ist also eine statische Einheit. Sie verändert sich nicht. Egal ob du dir die Schrift auf Windows oder Mac, oder in unterschiedlichen Browsern anschaust.
Pixel verändern sich auch nicht in verschachtelten (cascading) Parent-Child-Elementen. Wenn du also in einen Parent-Element mit 18px ein Child-Element mit 16px platzierst, bleibt das Child-Element 16px groß.
Willst du sicher gehen, dass dein Design, auch auf unterschiedlichen Systemen und Browsern, genau so aussieht, wie du es auf deinem eigenen Rechner angelegt hast, dann erreichst du das sicher am besten mit Pixeln.

em
Die Schrifteinheit em (aus dem Schriftsatz: equal to M) hat im Gegensatz zu Pixeln keinen festen Wert, da em immer relativ zur definierten Schriftgröße in Pixeln steht.
Wenn du also in deinem CSS Style Sheet die Textgröße mit 10px definierst, ist 1em=10px. Soll deine h1-Überschrift dann 30px groß sein, sind das 3em. Eigentlich gar nicht so schwierig, oder?
Wenn du allerdings nirgends in deinem CSS eine feste Textgröße definiert hat, orientiert sich em an der standardmäßigen Browser-Einstellung, die bei den meisten Browsern bei 16px liegt. 1Em wäre dann also dann =16px.
Du kannst dir bestimmt schon vorstellen, dass diese Rechnung auch komplizierter werden kann. Vor allem wenn du in deinem Style Sheet eine ganze Reihe unterschiedlicher Schriftgrößen verwendest.
Ein beliebter Trick ist deshalb, die Textgöße nicht auf einen festen Pixelwert zu setzen, sondern auf 62.5%. Denn wenn die Standard-Browsereinstellung 16px ist, macht das bei 62.5% =10px. So wird eine Schriftgröße von 21px zu 2.1em, was die Rechnung sehr viel einfacher macht.

Was sind die Vor- und Nachteile?
Ein großer Vorteil der Einheit em ist, dass em, im Gegensatz zu Pixeln, in Internet Explorer 6 oder noch älteren Browsern in der Größe veränderbar ist.
Ems sind außerdem auch auf Webseiten mit elastischen Layouts im Einsatz. Hier werden alle Elemente der Webseite in em definiert, so dass alle Elemente im Verhältnis zueinander stehen.
Das heißt: Wenn du deine Schriftgröße veränderst, passen sich alle Elemente auf deiner Seite an. Das macht ein elastisches Layout natürlich enorm flexibel.
Vorsichtig solltest du allerdings sein, wenn du em vor allem als Ersatz für Pixel verwenden willst. Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie verändern ihren Wert, sobald zwei Elemente ineinander verschachtelt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durcheinander führen kann, wenn du viele Elemente ineinander verschachtelst.

Nützliche kleine Helfer
Beim praktischen Pixel zu Em-Umwandler bekommst du den CSS Code für deine Schriften auch gleich mit dazu.
Der Pixel zu Em Rechner ist ein kleines, aber hilfreiches Javascript-Tool.
Mit Typetester kannst du Schriften in verschiedenen Größen, Farben, und Fonts testen, und bekommst auch gleich den CSS Code für deine Auswahl generiert.

Noch mehr Lesestoff
»How to size Text in CSS« ein Artikel von Richard Rutter von A List Apart.com.
Einen tolle Übersicht über Pixel, Em, Prozent und Punkt gibt Chris Coyier von CSS-Tricks in seinem Artikel »px-em-%-keyword«.

Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie verändern ihren Wert, sobald zwei Elemente ineinander verschachtelt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durcheinander führen kann, wenn du viele Elemente ineinander verschachtelst.

-> wir können es für uns nutzen!!!

Wir können es ausnutzen, Texte und Textpassagen halbwegs proportional zueinander wachsen zu lassen!
Ich muss halt irgendwo mal Prozentangaben machen, um Veränderungen vornehmen zu können.
-> der firebug hilft uns bei der Berechnung :)

Datei: em-px.html - in der Datei können wir mit Werten spielen, um die Relationseigenschaft von em besser zu verstehen!

weiterer Link:
http://pascalbirchler.ch/2008/02/09/die-unglaublichen-em-elastischen-layouts-mit-css/

Die unglaublichen Em & elastischen Layouts mit CSS
Dieser Beitrag ist eine freie Übersetzung des Artikels The Incredible Em & Elastic Layouts with CSS, welcher am 25. September 2007 von Jon Tan veröffentlicht wurde