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

bodenseejenny

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!

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' und Lukas' Playmowelt</title>
<link rel="stylesheet" type="text/css" href="stilseite1.css" />
</head>
<body>
<h1><style="font-face:bauhaus 93">Jenny' und Lukas' Playmowelt</h1>
<h2>Willkommen</h2>
<div><h3>F¨r wen ist diese Seite?</h3>
<p>Diese Seite ist für Playmobilfreunde und Interessierte. Sie soll zeigen wie viel Spaß 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ärt was der Begriff bedeutet und stellt die bisherigen Projekte von mir anhand von Text und Bildern vor. Vielleicht können die Tipps jemandem bei seinen eigenen Projekten helfen.</p>
<p>In Lukas Welt hat mein 6 jähriger Sohn die Mö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ühren.</p>
<p>Unter E-mail können Sie mich bei Fragen, Anregungen oder Kritik zu dieser Seite kontaktieren.</p></div>
</body>
</html>

Thonixx

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.

Elvis

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.

Elvis

Zitat von firefox5.0

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

Hättest Du fünf Sekunden genauer den Startbeitrag gelesen, dann würdest Du keine Klasse definieren, sondern nur h1 entsprechend formatieren.

bodenseejenny

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

Thonixx

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.

Elvis

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

Elvis

Zitat von firefox5.0

per FTP hoch und meinen Code einsetzen und auf h1 anwenden.

Hochladen hab ich ja ganz vergessen. Danke firefox!

Grevas

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.

bodenseejenny

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

Thonixx

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.

bodenseejenny

Danke für Eure Hilfe!
Aber leider bin ich zu blöd für CSS. Ich habs nicht hinbekommen.

Trozdem Danke!

LG Jenny

Grevas

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

koslowski

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.

Thonixx

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

koslowski

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?

Thonixx

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.

koslowski

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.

Tags