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 versus CSS

An einem kleinen Beispiel soll gezeigt werden inwiefern CSS und ein JS-Framework gleiche Funktionalitäten bieten aber auch gleichzeitig wo Unterschiede liegen.
Folgendes Codestück legt ein Zoom Icon über ein Bild rein unter zuhilfe von CSS. Hierbei wird ein leeres span-Tag eingefügt auf das wir später unser Icon legen wollen.

1
2
3
4
5
6
7
8
9
10
11

<div id="picGallery">
    <h2>CSS-Code</h2>
    <a href="someBigPic.jpg">
        <span></span>
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <span></span>
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Das CSS sähe dabei so aus:

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

#picGallery{
    width:       100%;
    overflow:  hidden;
}
#picGallery a {
    position:   relative;
    float:         left;
    margin:     5px;
}
#picGallery a span {
   display:none;
   background-image:url(zoom.png);
   background-repeat:no-repeat;
   width:48px;
   height:48px;
   position:absolute;
   left:15px;
   top:15px;
}
#picGallery img {
   border:    solid 1px #999;
   padding:  5px;
}
#picGallery  a:hover span {
   display:   block;
}

Soweit sogut. Nun mit Hilfe von jQuery. Der HTML Teil ist fast identsich. Allerdings brauchen wir hier die span-Tags noch nicht.

1
2
3
4
5
6
7
8
9

<div id="picGallery">
    <h1>jQuery Code</h1>
    <a href="someBigPic.jpg">
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Der JS-Code erzeugt den span und kümmert sich um das Einblenden..

1
2
3
4
5
6
7
8
9
10
11

   $(document).ready(function(){
      //Füge jedem a-tag in dem div mit der id "picGallery" ein span-Tag hinzu
      $("#picGallery a").append("<span></span>");
      //Standard fading Funktionen von jQuery
      $("#gallery2 a").hover(function(){
      $(this).children("span").fadeIn(600);
      },
      function(){
      $(this).children("span").fadeOut(200);
      });
});

Das wars auch schon. Natürlich muss das CSS im HTML Dokument referenziert werden, allerdings kann dann die a:hover Eigenschaft weggelassen werden. Bei Click würde das Bild in einem neuen Fenster geöffnet, bei Bedarf ließe sich noch ein Bildergalerie Skript damit verbinden. Ich hoffe das bei Gelegenheit noch vorstellen zu können.
Viel Erfolg!!

jQuery UI CSS Framework

Heute mal ein kleiner Exkurs auf die Oberflächengestaltung das vereinfachte Zusammenarbeiten zwischen Entwickler und Designer.
jQuery bietet ein eigenes CSS Framework. Im Gegensatz zu YAML, wohl eines der bekanntetesten Frameworks in diesem Bereich, ist das UI CSS Framework meiner Meinung nach weitaus einfacher zu handhaben, allerdings auch nicht ganz so mächtig. In erster Linie werden Bezeichnungen für Elemente durch Klassen vorgegeben. Nun hält man sich einfach an diese Standards und man kann das “Look a like” seiner Oberflächenkomponenten durch Austauschen der Themes schnell und einfach ändern.

Auch wird die Umsetzung von “Rounded corners” mit CSS3 unterstützt. Natürlich in den Browsern, die sich nach dieser W3C Empfehlung richten. Der IE6 gehört natürlich nicht dazu, hierfür muss auch mit dem jQuery CSS Framework individuell angepasst werden. Genauso werden bisher noch keine transparente png’s im IE6 unterstützt, was sich aber bald ändern soll. Aber hierfür ist bisher noch der alte CSS pngfix notwenig.
Allgemein mehr über das CSS Framework könnt ihr unter Theming API herausfinden.

Auch äußerst interessant ist der ThemeRoller. Hält man sich an die Standards der Theming API lassen sich damit einfach ansprechende Benutzeroberflächen gestalten, die auf die eigene Seite als CSS übernommen werden können.