Wie binde ich die eine Schrift wie Bauhaus in CSS ein?

    Hallo Leute,
    nachdem mir hier schon so toll geholfen wurde traue ich mich weiter zu fragen. Ich bin wirklich erst blutiger Anfänger in (X)HTML sowie CSS! :o

    Also ich mag auf meiner Seite die Überschrift h1 gerne in der Schrift Bauhaus 93 haben, die ich auch auf meinem Rechner installiert habe.
    Ich habe dazu eine CSS Date erstellt mit den gewollten Einstellungen, diese CSS Datei über das Element "link" im head eingebunden. Die CSS Einstellungen werden übernommen, nur die Schriftart nicht. Was mache ich falsch? Als erstes füge ich mal die erstellte CSS Datei rein, danach den Quelltext. PS: Habe ich nun das Div Element unten richtig eingesetzt. Will später den Text ab h3 bis zum letzten Absatz formatieren. Ausrichtung usw.
    Danke euch schon mal. LG Jenny

    body {
    background-color: blue;
    }
    h1 {
    color: white; font-size: 4em; font-face: bauhaus93;
    }
    p {
    color: white; font-family: monospace;
    }
    h2,h3{
    color: white;
    }


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content type" content="text/html; charset=ISO-8859-1" />
    <title>Jenny&apos; und Lukas&apos; Playmowelt</title>
    <link rel="stylesheet" type="text/css" href="stilseite1.css" />
    </head>
    <body>
    <h1><style="font-face:bauhaus 93">Jenny&apos; und Lukas&apos; Playmowelt</h1>
    <h2>Willkommen</h2>
    <div><h3>F&uml;r wen ist diese Seite?</h3>
    <p>Diese Seite ist für Playmobilfreunde und Interessierte. Sie soll zeigen wie viel Spa&szlig; Playmobil machen kann.</p>
    <p>In den Bildergalerien kann man sich unsere Playmobilsammlung in Szenen und Dioramen dargestellt anschauen.</p>
    <p>Unter Costomizing wird erkl&auml;rt was der Begriff bedeutet und stellt die bisherigen Projekte von mir anhand von Text und Bildern vor. Vielleicht k&ouml;nnen die Tipps jemandem bei seinen eigenen Projekten helfen.</p>
    <p>In Lukas Welt hat mein 6 j&auml;hriger Sohn die M&ouml;glichkeit seine manchmal sehr bunte, kreative und phantasievolle Playmobilwelt zu zeigen.</p>
    <p>Comics werden von mir selbst ausgedachte Geschichten sein, die die Seite interessanter und unterhaltsamer machen sollen.</p>
    <p>Links sollen zu anderen interessanten Seiten f&uuml;hren.</p>
    <p>Unter E-mail k&ouml;nnen Sie mich bei Fragen, Anregungen oder Kritik zu dieser Seite kontaktieren.</p></div>
    </body>
    </html>

    Benutz bitte die vorgegebenen Codes im Forum für den HTML Code: [html][/code]
    Du suchst dir die Schriftart heraus .ttf oder so ähnlich.

    Dann nur noch folgenden CSS Code:

    Code
    .bauhaus {
[COLOR=#000000][COLOR=#0000bb]font[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000bb]family[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#dd0000]"Bauhaus"[/COLOR][COLOR=#007700];  
[/COLOR][COLOR=#0000bb]src[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000bb]local[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]"Bauhaus"[/COLOR][COLOR=#007700]), 
[/COLOR][COLOR=#0000bb]url[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]"http://url.de/bauhaus.ttf"[/COLOR][COLOR=#007700]) [/COLOR][/COLOR]
}

    Alles, was mit Bauhaus sein soll, bekommt dann die Klasse bauhaus

    Etwa so:

    HTML
    <span class="bauhaus">Bauhaus Schriftart</span>

    Hättest du über Google in etwa 50 Sekunden herausgefunden.

    2 Mal editiert, zuletzt von firefox5.0 (25. September 2009 um 11:26)

    Zitat von bodenseejenny

    nachdem mir hier schon so toll geholfen wurde


    Bitte hilf uns auch und benutze die Formatierungsmöglichkeiten dieses Forums. ;)

    Zitat von bodenseejenny

    Schrift Bauhaus 93


    Wie denn nun genau?

    • Bauhaus 93
    • bauhaus 93
    • Bauhaus93
    • bauhaus93


    Schriftarten mit einem Leerzeichen werden in Anführungsstriche gesetzt!

    Und ersetze

    Code
    h1   {
       color: white; font-size: 4em; font-face: bauhaus93;
 }


    durch

    Code
    h1   {
       color: white; font-size: 4em; font-family: bauhaus93;
 }

    Des weiteren sollten noch alternative Schriftarten mit angeboten werden und vor allem zum Schluss noch die generische Schriftfamilie.

    Und ein

    HTML
    <meta http-equiv="Content-Style-Type" content="text/css" />


    sollte dem Head nicht schaden.

    Zitat von bodenseejenny

    PS: Habe ich nun das Div Element unten richtig eingesetzt. Will später den Text ab h3 bis zum letzten Absatz formatieren. Ausrichtung usw.


    Passt schon. Am besten gleich mit einer sinnvollen ID bezeichnen.

    Danke für die Antwort.
    Ähm, was soll ich benutzen? Was für vorgegebene html Codes? Sorry weiß nicht so recht was du meinst.

    Wo sucht man sich den die Schrifart raus?

    Danke ich probiere es mal aus!

    LG Jenny

    Gehst in den Windows-System Ordner Fonts und da sind alle drin.
    Dann nur noch rauskopieren, per FTP hoch und meinen Code einsetzen und auf h1 anwenden.

    Formatierung siehe Anhang.

    Zitat

    Generische Schriftfamilien

    Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen:

    serif = eine Schriftart mit Serifen,
    sans-serif = eine Schriftart ohne Serifen,
    cursive = eine Schriftart für Schreibschrift,
    fantasy = eine Schriftart für ungewöhnliche Schrift,
    monospace = eine Schriftart mit dicktengleichen Zeichen.

    Es empfiehlt sich, solche generische Schriftarten als letzte Angabe einer Wertzuweisung an font-family zu notieren - wie im ersten der obigen Beispiele. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls diese auf dem System nicht vorhanden ist.


    Quelle: selfhtml

    Somit ist die Seite allerdings nur Windowsfähig *hust*, da hab ich ehrlichgesagt selber schon gesucht und nichts brauchbares gefunden - wie soll man nun das ganze optimieren damits auch auf "jeder" plattform läuft?

    Soweit ich weiß, unterstützt der MAC z.B. .ttf nicht. Man könnte ja ein JS switch bauen, aber auf sowas n layout später aufzubauen würde mir persönlich nicht so sehr gefallen.

    Danke!
    @firefox. Wie muss ich denn die URL angeben für Bauhaus93. Sie liegt bei mir im Ordner WINDOWS/Fonts. Das mit dem de. hab ich dahinter nicht verstanden.
    Und muss ich das Dokument samt Schrift erst hochladen bevor ich das Ergebnis sehen kann? Ich übe erst lokal auf meinem Rechner und mache das mit einem einfachen Editor.

    LG Jenny

    Lokal musst du das mit der URL etwa so tun:

    url("./bauhaus.ttf");

    Das heisst, das Bauhaus-File muss im gleichen Verzeichnis liegen, wie die CSS Datei.

    Und noch was:
    Wenn du etwas für andere Plattformen willst, dann setzt bei family einfach noch:
    , sans-serif oder sowas ein, dann wählt CSS automatisch eine sans-serif Schriftart, falls die Bauhaus nicht verwendet werden kann.

    Zitat von firefox5.0


    Wenn du etwas für andere Plattformen willst, dann setzt bei family einfach noch:
    , sans-serif oder sowas ein, dann wählt CSS automatisch eine sans-serif Schriftart, falls die Bauhaus nicht verwendet werden kann.

    Es geht ja darum, Schriftarten für den MAC auch einbinden zu lassen. Da ich selbst kein MAC hab, kann ich das auch schlecht testen :/

    Und das Problem werd ich immerwieder haben, da der Kerl der meine Seiten später überprüft bevor sie an den Kunden gehen hat ein MAC - wenn er mir dann kommt und sagt "die Schrift ist ja ganz anders" *seufz*... Derzeit sag ich einfach, dass nicht-standard Schriftarten nicht gehen :roll:

    Hi,

    Browser können nur die Schriftart darstellen, die sie intus haben und das sind nicht so viele.
    Deshalb sollte man auch immer eine Auswahl von Schriftarten angeben.

    Statistiken welche Systeme welche Schriftarten intus haben kannst du hier unter font survey results einsehen.

    Wenn es z.B. nur um eine H1-Überschrift geht läßt sich da sicher was mit Image Replacement nach Gilder/Levin machen.
    Da sieht dann die Schrift garantiert überall ziemlich gleich aus. ;)

    Oder du verwendest PHP, um das Bild dynamisch zu generieren.
    Dazu suche mal nach imagettf und php in Google.

    Hi,

    Zitat von firefox5.0

    Oder du verwendest PHP, um das Bild dynamisch zu generieren.
    Dazu suche mal nach imagettf und php in Google.

    der H1-Text sollte doch noch im Quelltext stehen und nicht durch das Bild ersetzt werden, sonst hat Google ja nix zu indexieren.
    Deshalb schiebt man bei Gilder/Levin ja das Bild über den Text.

    Wenn ich das Bild mit PHP generiere ist das doch insgesamt umständlicher, weil die entsprechenden CSS-Formatierungen ja immer noch hinterlegt werden müßten.

    Oder habe ich dich falsch verstanden?

    Nein, hab einfach nicht so weit überlegt. Aber die Idee mit der Überlagerung ist nicht schlimm.
    Das könnte echt besser sein, sry für meine Lösung ;)

    Aber bei der Bildgenerierung durch PHP muss man doch nichts mehr im CSS Code haben, ausser einem background: Attribut.
    Die Positionierung, Farbe, etc. übernimmt die Funktion in PHP.

    Hi,

    Zitat von firefox5.0


    Aber bei der Bildgenerierung durch PHP muss man doch nichts mehr im CSS Code haben, ausser einem background: Attribut.
    Die Positionierung, Farbe, etc. übernimmt die Funktion in PHP.

    da hast du völlig recht. :)

    Wenn es nur ums Bilder einbinden geht ist PHP eine bedenkenswerte Alternative.