Thei-Zwickau: font-face Anfängerfrage?

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

  1. 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:

    Besten Dank

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
  2. @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. 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

    --
    sumpsi - posui - clusi
    1. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann