font-face Anfängerfrage?

[Thei-Zwickau]

Möglicherweise ist das eine "Anfängerfrage" und deshalb leicht zu beantworten.

Ich möchte in meine Webseite einen mit "font-face" gestalteten Text verwenden. (Font eim "Font-squarrel" hochgeladen, Fontkit runtergeladen und in die erhaltene css-Datei in meine css eingebaut. Das funktioniert auch super! Aber wie gebe ich diesem Text jetzt eine andere Farbe und am besten auch noch einen Schatten? Dazu müsste meine html Datei ja 2 oder gar 3 mal unterschiedliche Klassen ansprechen und auch verstehen! Geht das? und wie? Besten Dank

[Matthias Scharwies]

Servus!

Möglicherweise ist das eine "Anfängerfrage" und deshalb leicht zu beantworten.

Ich möchte in meine Webseite einen mit "font-face" gestalteten Text verwenden. (Font eim "Font-squarrel" hochgeladen, Fontkit runtergeladen und in die erhaltene css-Datei in meine css eingebaut. Das funktioniert auch super!

Sehr gut!

Aber wie gebe ich diesem Text jetzt eine andere Farbe und am besten auch noch einen Schatten?

Du hast ja wohl irgendwo eine CSS-Festlegung:

element {
  font-face: ...
}

diese kannst du z.B. mit color oder text-shadow erweitern

Dazu müsste meine html Datei ja 2 oder gar 3 mal unterschiedliche Klassen ansprechen und auch verstehen!

Geht das? und wie?

Das müsste man im Einzelfall sehen. Hier einige Tutorials:

• CSS/Einstieg_in_CSS
• CSS/Tutorials/Überschriften_interessant_gestalten

Besten Dank

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Thei-Zwickau

Aber wie gebe ich diesem Text jetzt eine andere Farbe

Mit den CSS-Eigenschaften color

und am besten auch noch einen Schatten?

und text-shadow (Beides verlinkt. Wegen ungünstigem Stylesheet muss man das hier dazuschreiben.)

Dazu müsste meine html Datei ja 2 oder gar 3 mal unterschiedliche Klassen ansprechen

Nein. Mit Grundlagen von CSS bist du vertraut?

LLAP 🖖

[Rolf B]

Hallo Thei-Zwickau,

es gibt diverse Möglichkeiten. Du kannst bei diesem HTML

<h2 class="badHeader">I Look Into Your Eyes</h2>

1. in einer Regel mehrere Eigenschaften setzen

h2 {
   font: 15px serif; /* oder deine Schrift */
   color: white;
   background-color: red;
}

2. für eine Element oder eine Klasse mehrere Regeln formulieren

h2 {
   font: 15px serif; /* oder deine Schrift */
}
h2 {
   color:white;
}
.badHeader { 
   color:green; 
   background-color: red;
}

Bei Kollisitionen - wie hier für color - greifen die CSS Spezifitäts-Regeln. Ein Typselektor (oder Elementselektor) ist weniger spezifisch als ein Klassenselektor, darum würde die Schrift hier grün werden.

3. einem Element mehrere Klassen geben

<h2 class="badHeader faceText">I Look Into You Eyes</h2>

.faceText {
   font: ...;
   color: green;
}

.badHeader {
   color: white;
   background-color: green;
}

Bei gleicher Spezifizität gewinnt die spätere Regel, der Text würde hier weiß werden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

   font: 15px serif; /* oder deine Schrift */

Wenn im Stylesheet irgendwo px auftaucht, sehe ich das i.d.R. als Fehler an.

3. einem Element mehrere Klassen geben

<h2 class="badHeader faceText">I Look Into You Eyes</h2>

Wobei präsentationsbezogene Klassen keine gute Idee sind.

LLAP 🖖