zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Schriftenvorschau in Dropdown Liste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.12.2010, 15:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.12.2010
Beiträge: 1
Reiseeck befindet sich auf einem aufstrebenden Ast
Standard Schriftenvorschau in Dropdown Liste

Hallo zusammen,

ich habe hier ein Problem zu lösen bei welchem ich im Moment nicht weiter komme. In einer Dropdown Liste werden verschiedene Schriften angegeben. Nun steht dort der Name der jeweiligen Schrift. Ein "Normaler Nutzer" kann mit einer Schriftart wie "Bauhaus MD" etc. nichts anfangen. Daher soll die Schriftart selbst in der Dropdown Liste gezeigt werden.

Ich dachte mir das wie folgt:
<OPTION STYLE="font-namexxxxx" VALUE.....>Item 1</OPTION>

Das funktioniert offensichtlich nicht. Vielleicht hat jemand so etwas schon gemacht und kann mir weiterhelfen. Eventuell kennt jemand einen Link wo man sich belesen kann.

Bin für jede Hilfe dankbar...

LG - Frank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.12.2010, 16:53
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

So wie ich das verstehe, willst du die jeweilige Schriftart auch optisch darstellen.
Dazu gibts eigentlich nur die Möglichkeit mit einer Grafik.
Das ganze dann per Image Replacement einbauen.

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.12.2010, 17:33
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Reiseeck -> Du gehst das ganze auch falsch an.
1. -> Fonts wählst du im Style nicht mit "font-name", sondern mit "font-family" aus
2. -> wird nicht jeder der Seitenbenutzer diese Schriftarten lokal installiert haben, ergo nicht angezeigt bekommen. Dazu aber unten mehr ------

Manfred ->
das ist so nicht ganz Richtig. Es stimmt schon, mit Grafiken bist du auf der Sicheren Seite, was die Cross-Browser-Funktionalität angeht.

Die einzige möglichkeit ist es aber nicht.

"Webfonts" ist das Zauberwort:

Zitat:
Du verlinkst im Head per <link>-Tag zum Webfont -> Bsp. aus dem Google font directory

Danach erstellst du deine Dropdown-Liste und jedem Option-Punkt gibst du eine eindeutige id.
Dieser weist du du dann mit "font-family..." den font zu.
Eine kleine Anleitung, wie so etwas aussehen könnte:
Zitat:
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neucha&subset=latin' rel='stylesheet' type='text/css'>

<style type="text/css">
.droid {font-family: 'Droid Sans', arial, serif;}
.lobster {font-family: 'Lobster', arial, serif;}
.reenie {font-family: 'Reenie Beanie', arial, serif;}
.tangerine {font-family: 'Tangerine', arial, serif;}
.neucha {font-family: 'Neucha', arial, serif;}
</style>

</head>

<body>

<select>
<option class="droid">Hallo Welt</option>
<option class="lobster">Hallo Welt</option>
<option class="reenie">Hallo Welt</option>
<option class="tangerine">Hallo Welt</option>
<option class="neucha">Hallo Welt</option>
</select>

</body>
Ob es nun Browserübergreifend funktioniert, muss man dann ausgiebig testen.


Gruß...

Geändert von zeji (01.12.2010 um 17:36 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 01.12.2010, 21:02
Neuer Benutzer
neuer user
 
Registriert seit: 23.11.2010
Beiträge: 23
emha befindet sich auf einem aufstrebenden Ast
Standard

Nabend,

ich würde dir raten, eine externe css anzulegen

Ist zwar viel Arbeit aber würde jeder Option eine eigene class zuweisen und die dann stylen. Zum Beispiel so:

HTML:
<option class="arial">Arial</option>
<option class="verdana">Verdana</option>

CSS:
.arial {
font-family:Arial;
}

.verdana {
font-family:Verdana;
}

Hoffe, ich konnte etwas helfen

Liebe Grüße,
emha
Mit Zitat antworten
  #5 (permalink)  
Alt 02.12.2010, 10:56
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Zitat:
Zitat von emha Beitrag anzeigen
ich würde dir raten, eine externe css anzulegen
Macht natürlich Sinn, allerdings für seinen Fall nur in Verbindung mit den erwähnten Webfonts, Arial und Verdana wird jeder lokal installiert haben.

Übrigens, falls du Schriftarten hast, die entweder unter keiner Lizenz stehen, es erlauben diese in Webfont-Format umzuwandeln, oder direkt in dieser Form vorliegen, kannst du sie auch selbst auf deinen Server schieben und per @font-face in deine css-datei einbinden...

Unter Fontface-Generator kannst du deine Schriften in diese Formate (glaube das sind 4-5 Formate) umwandeln.. -> wie gesagt, vor diesem Schritt das Rechtliche mit den Lizenzen usw. klären...


Gruß...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontale Liste mit Dropdown zentrieren Amnesys (X)HTML 4 13.10.2010 09:53
Problem mit einer DropDown Liste manuel_g CSS 2 31.03.2010 11:11
<li> von einer Liste in andere verschieben tichy Javascript & Ajax 5 16.07.2009 14:54
DropDown CSS/JS Mix, Kleine Frage pkipper CSS 0 01.10.2008 11:23
Liste (inline) Umbruch erzeugen Steakfred CSS 3 09.05.2006 13:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:13 Uhr.