font-variant?

**Coras** · 15.02.2005 15:44

Also.
Ich möchte, das meine Überschriften komplett in Großbuchstaben geschrieben werden. Dabei soll der erste Buchstabe noch ein bisschen größer sein, als die anderen. Auf flare3d ist das mit dem CSS-Tag "font-variant" gelöst.
Wenn ich aber versuche, das mit Font-Variant zu lösen, wird alles gleichgroß groß geschrieben.
Muss man da irgendwas beachten?

**wrtlprnft** · 15.02.2005 15:54

HTML-Code:

h1 {
    text-transform:uppercase;
    font-size:15px;
}
h1:first-letter {
    font-size:18px;
}

Müsste eigentlich gehen, ich weiß nur nicht, welche Browser das unterstützen. Ansonsten eben einen mit um den ersten Buchstaben von einer Überschrift und dann

HTML-Code:

h1 {
    text-transform:uppercase;
    font-size:15px;
}
h1 span {
    font-size:18px;
}

**Coras** · 15.02.2005 16:29

Hm...
Ich habe mich wohl unklar ausgedrückt.
Wenn ich first-letter verwende, wird, soweit ich weiß, nur der erste Buchstabe des Textes groß geschrieben. Ich will aber den Anfang jedes Wortes größer haben.

**Jesus_666** · 15.02.2005 17:24

Code:

.klasse { font-variant: small-caps }

Damit werden Kapitälchen erzeugt, sprich: Großbuchstaben werden normal dargestellt und Kleinbuchstaben als verkleinerte Großbuchstaben.

**wrtlprnft** · 15.02.2005 18:28

Verschiedene Browser zeigen das aber verschieden an. Opera und FF machen Größen, die in kleineren Schriftarten kaum zu unterscheiden sind, Konqueror macht Großbuchstaben gleich fast doppelt so groß.

@Coras: Nein, soweit ich weis gibt es keine CSS-Anweisung, um die Differenz zu ändern.

**Coras** · 16.02.2005 15:44

Zitat von Jesus_666

Code:

.klasse { font-variant: small-caps }

Damit werden Kapitälchen erzeugt, sprich: Großbuchstaben werden normal dargestellt und Kleinbuchstaben als verkleinerte Großbuchstaben.

Das ist richtig, jedenfalls in der Theorie.
Ich habe genau dieses Tag einem , einem und einem <td> Element zugewiesen und immer wurden Groß- und Kleinbuchstaben gleich groß dargestellt.
In meinem Forum jedoch ging es komischerweise, obwohl sowohl auf der Hauptseite, als auch im Forum Tahoma als Font eingestellt ist.

**Jesus_666** · 17.02.2005 00:32

Dann gehe ich davon aus, daß da irgendeine andere Regel ist, die die Darstellung stört. Wenn du nicht gerade einen andern Browser nimmst wird die selbe Formatierung immer gleich angezeigt.

**Coras** · 17.02.2005 13:53

Ja, davon gehe ich auch aus.
Habe nur leider nichts gefunden (übrgiens, was den Browser angeht: Ich benutze FireFox 1.0).

HTML-Code:

 <style type="text/css">
 body {
  margin: 0px;
 }

 .content {
  background-image: url(./images/content_background.jpg); 
  background-repeat: no-repeat; 
  background-position: center; 
  margin: 0px; 
  spacing: 0px;
 }

 .navilinks, td, table, .content {
  font-family: tahoma;
  color: #c0c0c0;
  text-decoration: none;
 }

 a:link, a:active, a:visited {
  font-family: tahoma;
  color: #cccccc;
  text-decoration: none;
 }

 a:hover {
  font-family: tahoma;
  color: #818D98;
  text-decoration: none;
 }
 
 input, textarea {
  background-image: url(./images/input.jpg);
  background-repeat: repeat-x;
  background-color: #373737;
  font-weight: 700; 
  font-size: 10px;
  font-family: tahoma;
  color: #cccccc;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
 }
 
 .title {
  font-weight: 700;
  font-size: 12px;
  font-family: tahoma;
  font-variant: small-caps;
 }
 </style>

**Jesus_666** · 17.02.2005 14:38

Das funktioniert bei mir (Mozilla/5.0 (X11; U; Linux i686; de-DE; rv:1.7.5) Gecko/20041108 Firefox/1.0) genau so, wie es sollte. Allerdings könnte es sein, daß du die Großschreibung einfach nicht erkennst - bei Tahoma sind die Großbuchstaben nur wenig größer als die Kleinbuchstaben.

Flgender Code brachte bei mir absolut korrekte Ergebnisse:

Code:

<html>
 <head>
   <!-- Stylesheet wurde weggelassen, da schon gepostet - hier bitte einfügen -->
 </head>
 <body>
  <div class="title">Dies ist ein Satz mit Groß- und Kleinschreibung, oh ja.</div>
  <div class="title" style="font-size: 24pt">Dies ist ein Satz mit Groß- und Kleinschreibung, oh ja.</div>
 </body>
</html>

In der Zeile mit Schriftgröße 24 sieht man die Groß- und Kleinschreibung deutlicher.

BTW, Angaben in Pixeln sollte man vermeiden; font-size wird besser mit pt angegeben; das entspricht den normalen Schriftgrößen.

**Coras** · 17.02.2005 15:08

X_X
...
Danke für die Hilfe - aber das hätte alles garnicht sein müssen, wie mir gerade auffällt. Ich habe nur ein "$title = strtoupper($title)" in der PHP File übersehen... naja, danke. Vielen Dank!

**Geiu** · 20.02.2005 16:13

Zitat von Jesus_666

BTW, Angaben in Pixeln sollte man vermeiden; font-size wird besser mit pt angegeben; das entspricht den normalen Schriftgrößen.

Nein, für den Bildschirm ist px besser, weil andere Einheiten erst umgerechnet werden müssen und auch je nach OS variieren
Pt ist nur für den Auisdruck gedacht. (Am besten ist es aber, die Schriftgrößen in em (1 em entspricht der eingestellten Schriftgröße) zu definieren, weil sie sich sonst im IE nicht vergrößern lassen)

**Jesus_666** · 20.02.2005 17:15

Angaben in Pixeln haben den Nachteil, daß sie sich nicht an dan Bildschirm anpassen: Wenn der Text eine Größe von 12 Pixeln hat, dann ist er auf einem 800×600-Bildschirm 12 Pixel groß und auf einem SUXGA (2048×1536)-Bildschirm auch. Allerdings richten sich andere Formate AFAIK nach der DPI-Einstallung des Betriebssystems, womit die Schriftarten auch auf großen Bildschirmen lesbar bleiben.

**Geiu** · 20.02.2005 18:09

Zitat von Jesus_666

Angaben in Pixeln haben den Nachteil, daß sie sich nicht an dan Bildschirm anpassen: Wenn der Text eine Größe von 12 Pixeln hat, dann ist er auf einem 800×600-Bildschirm 12 Pixel groß und auf einem SUXGA (2048×1536)-Bildschirm auch. Allerdings richten sich andere Formate AFAIK nach der DPI-Einstallung des Betriebssystems, womit die Schriftarten auch auf großen Bildschirmen lesbar bleiben.

Nein, das stimmt nicht, habs grade getestet, ich habe zwei s genommen, der eine hatte 12pt und der andere 16px und die beiden s wurden auf 1600x1200 und 800x600 immer beide genau gleich groß dargestellt obwohl 1 Pixel auf 800x600 ja doppelt so groß ist

**Jesus_666** · 20.02.2005 18:44

Das Problem ist, daß AFAIK die px-Angabe tatsächlich auf Pixelgrößen bezogen ist. Deshalb könnten einige Renderengines tatsächlich den Text immer n Pixel groß machen.

Thema: font-variant?

Themen-Optionen

Anzeige

font-variant?

Berechtigungen