Typeface mit font-weight:bold

Als Webentwickler kennt man das Problem mit kommerziellen Schriftarten, die aus dem Corporate Design stammen, aber nicht als Webfont zur Verfügung stehen. Beliebt sind dafür immer verschiedenste Formen des Image-Replacements. Die Nachteile davon liegen auf der Hand:

• Keine optimale Suchmaschinerkennung
• Hoher Änderungs- und Verwaltungsaufwand
• Text nicht kopierbar
• Problem der Barrierefreiheit

Neben der Bilderlösung dürfte sIFR eine bekannte Methode sein. Hier wird der Text aus einem bestimmten HTML-Tag gelesen und durch einen Flashfilm mit eingebettem Font ersetzt. In der Theorie gut, in der Praxis schwierig wegen eines enorm hohen Konfigurationsaufwands.

Nach dem gleichen Prinzip funktioniert das js-Plugin Typeface. Nur ist es etwas praktischer in der Handhabung.
Der folgende Code bindet einen normalen Font und einen später beschriebenen Bold-Font ein:

1
2
3

<script src="typeface-0.14.js"><!--mce:0--></script>
<script src="mysrcFont.typeface.js"><!--mce:1--></script>
<script src="mysrcFontBold.typeface.js"><!--mce:2--></script>

Um dem Text die entsprechende Schriftart zuzuweißen, benutzt man einfach die CSS Anweisung font-family.

1
2

<div id="text" style="font-family: mySrc Font;">
Lorum ipsolum...</div>

Den Namen des im syle-Attribut verwendeten Fonts kann man in den jeweiligen js-Dateien nachlesen.
Das Ganze hat zwei Nachteile, wie sie auch schon auf der Website beschrieben werden. Performanceprobleme bei größeren Textmengen und Standard-CSS Hovereffekte funktionieren nicht mehr.
Damit der Font in eine Javascript Datei umgewandelt werden muss er in einem Truetype oder Opentype Format vorliegen. Nicht immer ist bei diesen Schriften auch die fette Variante integriert. Um das in den Griff zu bekommen, kann man mit einem Font Bearbeitungstool nur die Bold-Variante exportieren und diese ebenfalls umwandeln. Bindet man nun diese beide JS-Dateien ein und weist die Bold-Schrift einem einem HTML-Element zu, passiert abgesehen von einer Fehlerausgabe in der Firebug Konsole nichts.
Die Lösung dafür ist ganz einfach. Der Font-Converter auf der Typeface Website integriert auch Informationen über Schriftschnitte weshalb der CSS-Selektor diese Info auch benötigt:

1
2
3
4
5
6
7
8

#text{
  font-family: mySrc Font, Verdana, Arial;
}
 
#boldFont{
  font-family: mySrc Boldfont, Verdana, Arial;
  font-weight: bold;
}

Damit ist der Workaround für die Einbettung von normalen und bold Schriften perfekt.

Cufón – Eine Javascript alternative zu sIFR
sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7

jQuery Media Plugin zum Einbinden verschiedener Mime-Types

Neulich bin ich auf ein jQuery Plugin gestoßen um verschiedene Player oder Media Files ganz einfach mit jQuery einzubinden. Eine kleine Auflistung der Player:

• Quicktime
• Flash
• Windows Media Player
• Real Player
• Silverlight
• iFrame

Es lassen sich damit auch direkt Dateien aufrufen, die dann mittels einem der genannten Player abgespielt werden. Vorrausgesetzt natürlich, dass das jeweilige Plugin des Players bereits im Browser installiert ist. Das Media Plugin besitzt ansich eine recht einfache Funktionsweise. Es ersetzt einfache a-Tags auf eine Media-File durch den für den Browser notwendigen Einbettungscode, der weitaus länger und komplexer ist.

Ein kleines Beispiel wie man mittels diesem Plugin eine PDF direkt auf der Website anzeigen kann:

1
2

//Aufruf des Media Plugins mit zwei Optionen(normalerweise innerhalb des DOM-Ready Events)
$('a.media').media({width:500, height:400});

Der HTML-Code müsste dann folgendermaßen aussehen:

1
2
3
4
5
6

<script type="text/javascript" src="jquery.media.js"></script>
 
<!-- metadata ist ebenfalls ein plugin das in diesem Beispiel zur Anzeige der Größe gebraucht wird -->
<script type="text/javascript" src="jquery.metadata.js"></script>
 
<a class="media" href="guice.pdf">PDF File</a>

That’s it. Zu finden ist das Ganze hier..

sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7

Gestern habe ich in eines meiner Projekte sIFR 3 revision 436 eingebaut und bin dabei auf ein Problem mit dem scroll-Verhalten gestoßen.
Das Problem ist, kommt man beim scrollen mit der Maus über ein mittels sIFR erzeugtes Textelement verliert die Seite den scroll-Fokus und stoppt.
Was zu einer für den User nicht hinnehmbaren Bedienung der Seite führt. Das Problem ist wohl bekannt, allerdings findet man im Netz nicht wirklich eine Lösung.
Daher will ich euch diesen kurzen Workaround nicht vorenthalten.

Man bekommt es zwar hin das dass ganze in Firefox 3 problemlos läuft, geht es allerdings dort macht der Internet-Explorer probleme.
Und fixed man das ganze so das es im IE läuft, wer hätte es gedacht, macht das ganze im Firefox nicht mehr mit.
Firefox benötigt zum reibungslosen Ablauf ein “wmode: ‘transparent’”, welches jedoch der IE garnicht mag.
Für den IE muss auch die background-color gesetzt sein.

Die Lösung:
sIFR kommt von Haus aus mit einer Funktion zum erkennen des User-Agents daher, welche sich zum hier zum lösen des Problems perfekt nutzen lässt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

sIFR.activate(futura);
 
var futura = { src: 'futura.swf' };
 
if(sIFR.ua.gecko){
	sIFR.replace(futura, {
		selector: 'h1',
		wmode: 'transparent',
		fixFocus: 'true',
		css: [
			'.sIFR-root { background-color: #FFFFFF;color: #000000; text-transform: uppercase; margin: 0;}'
			,'a {color: #000000; text-decoration: none; }'
			,'a:hover {color: #000000; text-decoration: underline;}'
		]
	});
}else{
		sIFR.replace(futura, {
		selector: 'h1',
		fixFocus: 'true',
		css: [
			'.sIFR-root { background-color: #FFFFFF;color: #000000; text-transform: uppercase; margin: 0;}'
			,'a {color: #000000; text-decoration: none; }'
			,'a:hover {color: #000000; text-decoration: underline;}'
		]
	});
}

Dies ist ein Simples Beispiel wie man z.B. Firefox von anderen Browser unterscheiden kann.

Unterscheiden lassen sich folgende Browser:
opera, konqueror, ie, ieSupported (für Smartphones), ieWin, windows, ieMac, macintosh, safari, webkit, khtml, gecko.
Des weiteren lassen sich auch Betriebssystem, Versionen usw abfragen. Wer´s genau wissen will einfach mal in der sifr.js ab Zeile 354 schauen.

Noch ein kleiner Tipp bzgl. sIFR und Umlauten. Bevor Ihr eure swf in Flash veröffentlicht geht auf die Schrift-Palette, Zeicheneinbettung und gebt zusätzlich zu “”‘’…_ & noch äöüÄÜÖß mit an um auch diese Zeichen integriert zu haben.