sIFR 3 Führen und Unterschneiden

Question

Ich versuche, den Zeilenabstand und die Unterschneidung bei einigen sIFR 3-Typen auf einer Website, an der ich arbeite, zum Laufen zu bringen (wie im Wiki beschrieben): http://wiki.novemberborn.net/sifr3/Styling ), aber diese beiden Parameter scheinen keine Wirkung zu haben, egal was ich tue.

Ich verwende keine Zwischenzeichen (kein 'px' oder 'em'), wie es erforderlich ist. Ich habe auch verschiedene swf-Dateien mit verschiedenen Schriftarten ausprobiert, nur um sicherzugehen, dass es nicht an der Schriftart liegt. Ich weiß nicht, warum es nicht funktioniert. Alle anderen css-Parameter, die ich .sIFR-Root zuweise, funktionieren einwandfrei. Hier ist ein Beispiel für meinen Code mit 'leading'.

In sifr_config.js:

sIFR.replace(snl, {
    selector: '.section-title h1',
    css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
    wmode: 'transparent'
});

Im HTML-Dokument:

<div class="section-title">
    <h1>sIFR Text</h1>
</div>

(Ich habe den CSS-Code auch mit und ohne die eckigen Klammern ausprobiert, da ich beide Varianten gesehen habe. Es scheint keinen Unterschied zu machen).

Was mache ich falsch? Für jede Hilfe wäre ich Ihnen sehr dankbar; danke!

Answer 1

ETA: Ich habe einen weniger hakeligen Weg gefunden: line-height scheint zu funktionieren, wenn es zum CSS für das ersetzte Element hinzugefügt wird (in meinem Beispiel wäre das: .sIFR-active .section-title h1). So konnte ich die normale alte line-height verwenden, um einen Rand vorzutäuschen.

---

Also gut - da dieses Thema alle sprachlos gemacht hat, hier ist, was ich herausgefunden habe:

Ursprünglich gab es viele Vorschläge für die Verwendung von Leading als Ersatz für margin-top oder padding-top, da diese nicht mit sIFR funktionieren werden. Dies ist, was ich versuchte, es für zu verwenden. Ich hatte eine einzelne Textzeile und musste ihr oben etwas Platz geben, also versuchte ich, dies zu erreichen, indem ich den Zeilenabstand (Zeilenhöhe) vergrößerte - ohne Erfolg. Ich glaube, das hat einmal funktioniert, aber als ich mir die Änderungsprotokolle für alle Revisionen von sIFR ansah, fand ich einen Hinweis auf eine "Korrektur" des Zeilenabstands. Offensichtlich betrachtete der Entwickler die Erkennung von Zeilenumbrüchen bei einzeiligem Text als Fehler und "reparierte" es so, dass der Zeilenumbruch nur bei mehrzeiligem Text angewendet wird. Ich testete, indem ich einen Zeilenumbruch vor meinen Text setzte, und tatsächlich, der Zeilenumbruch funktionierte!

Es scheint also, dass ich jetzt, um einen oberen Rand in meiner sIFR-Kopfzeile zu erreichen, auf die eine oder andere Weise unnötigen Code hinzufügen muss - indem ich sie in ein div oder span mit einem oberen Rand einfüge oder indem ich einen Zeilenumbruch hinzufüge und einen negativen Zeilenabstand verwende.

Ich habe immer noch keine Ahnung vom Kerning, aber der Buchstabenabstand scheint zu funktionieren, also

Wenn jemand zusätzliche Informationen hat, bin ich ganz Ohr!

Answer 2

So funktioniert es bei mir, wenn ich sIFR 3 verwende, um ein h2 mit der Schriftart Serifa in Rot mit minimalem Buchstabenabstand und Zeilenabstand zu erhalten. Die eigentliche sIFR swf ist nichts Besonderes, einfach wie in der sIFR-Dokumentation erstellt. Wie oben erwähnt, funktionieren offsetTop und tuneHeight auch für die Anpassung der Positionierung (unten gezeigt, obwohl ich sie nicht verwendet haben, so auf 0 gesetzt).

In sifr.css

.sIFR-active h2.replace {
    color: #FF0000;
    visibility: hidden;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 2.5em;
    text-transform:uppercase;
  }

in sifr-config.js

sIFR.replace(serifa, {
    selector: 'h2.replace',
    css: ['.sIFR-root { letter-spacing: -2; leading: -15; kerning:true; color:#FF0000; text-transform:uppercase; font-size:2.5em; }' ], 
    tuneWidth: '0' , tuneHeight: '0' , offsetTop: '0' });

In einer html-Seite (zum Beispiel):

<div class="column grid_4">
    <h2 class="replace">Title here</h2>
</div>