WebDevTeam’s Blog

Web Development, JavaScript, CSS, Ajax, Web2.0, Usability, Interaction, Tools

Posts Tagged ‘fonts

Font Xplorer – Freeware

with one comment

Es gibt sicherlich eine Menge Tools, um sich die installierten Fonts als Vorschau anzuzeigen. Eines davon ist fontxplorer (Freeware): klein, einfach, schnell.

Um sich einen eigenen Text anzeigen zu lassen, sind zwei Schritte notwendig:

font_explorer

Alternativ geht z.B. auch der Font Picker (Adobe Air).

Written by webdevteam

Juni 19, 2009 at 10:57 am

Veröffentlicht in Uncategorized

Tagged with ,

Zeilenumbruch auch ohne Leerzeichen erzwingen

leave a comment »

So, ich habe auch einen Beitrag zum Thema „Text Umbrechen“ zu leisten. Danke (!) an die Mitautoren für die zwei Beiträge:

Ich hatte dies schon einmal (June 14th, 2007) in meinem alten Blog geschrieben:

Firefox und IE word wrap, Bugeintrag bei mozilla…

Funktioniert aber trotzdem nicht im Firefox.

Einfache Möglichkeit: [wbr] einfügen – www.quirksmode.org

Mit Prototype

<div id="a" style="width: 20px;">aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script  type="text/javascript"
   src="http://www.prototypejs.org/assets/2007/5/1/prototype.js"></script>
<script type="text/javascript">
   $("a").innerHTML=$("a").innerHTML.split("").join("<wbr>");
</script>

Mit jQuery

<div class="j" style="width: 20px;">jjjjjjjjjjjjjjjjjjjjjjjj</div>
<script type="text/javascript"
   src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript">
   $(".j").html($(".j").html().split('').join('<wbr>'));
</script>

Problem
Das Problem ist dann nur, dass alles, was umbrechen kann, auch umbricht! D.h. “Dies ist ein Textbeispiel” wird durch die Skripte zu

D<wbr/>i<wbr/>e<wbr/>s<wbr/> <wbr/>i<wbr/>s<wbr/>t<wbr/> <wbr/>e<wbr/>i<wbr/>n<wbr/>
<wbr/>T<wbr/>e<wbr/>x<wbr/>t<wbr/>b<wbr/>e<wbr/>i<wbr/>s<wbr/>p<wbr/>i<wbr/>e<wbr/>l

und bricht natürlich überall, wo das Ende eines umrahmenden Elements (mit einer festen Breite) erreicht ist und nicht nur bei den Leerzeichen! Es kann also so brechen:

Dies ist ein Textb
eispiel

obwohl es evtl. per default bei den Leerzeichen umbrechen würde:

Dies ist ein
Textbeispiel

Interessant dazu auch:
Wrapping Text Inside Pre Tags

Written by webdevteam

April 8, 2009 at 9:00 pm

Veröffentlicht in Uncategorized

Tagged with , , , ,

Cufón – eine Alternative zu sIFR?

leave a comment »

Es gibt ja einige Möglichkeiten, Schriften zu ersetzen. Wir sind gestern über Cufón gestolpert. Mir war das bislang überhaupt nicht bekannt, aber es macht einen guten Eindruck bzgl. der Geschwindigkeit.

Einen Vergleich zwischen sIFR (sIFR 2, sIFR3 beta, sIFR Generator) und Cufón findet man hier.

Update: Man hat bei Cufón erstmal leider einen „Blob“ Effekt, d.h. man sieht erst die normale Schrift, dann die umgewandelte. sIFR macht dies anders: alle Elemente für sIFR werden erst einmal per CSS mit

visibility:hidden;

versteckt, dann rennt das sIFR Script durch die Seite. Dadurch erscheinen sie erst dann, wenn sIFR fertig ist.

Update 20.04.

Dank Twitter (@gracesmith) habe ich noch einen Artikel zu vermelden: „Exploring Cufón, a sIFR alternative for font embedding„. Dort geht es auch noch einmal um die Benutzung und die Gegenüberstellung zu sIFR.

Written by webdevteam

März 26, 2009 at 7:23 am

Veröffentlicht in Uncategorized

Tagged with ,

Aktuelle (lesenswerte) Beiträge beim Smashing Magazine

leave a comment »

Written by webdevteam

März 12, 2009 at 3:19 pm

Veröffentlicht in Uncategorized

Tagged with , , , ,

Schriften, -arten, -größen, -laufweiten, -farben, -schnitte – Unterstützung benötigt!

leave a comment »

Smashing Magazine

Smashing Magazine

Das SmashingMagazine hat ja sehr viele schöne Artikel. Gestern habe ich kurz den Artikel 50 Useful Design Tools For Beautiful Web Typography angeschaut. Dort sind nützliche Verweise enthalten:

  • Font Stacks
  • Listen von Schriftarten, die auf welcher Plattform vorhanden sind
  • Tools, um Pixel in EM und umgekehrt umzurechnen
  • Tools, wo man sich die schriftbezogenen Änderungen im CSS gleich als Vorschau ansehen kann
  • Schriftartersetzungen (u.a. auch ein jQuery sIFR Plugin)
  • Grid Tools
  • Free Fonts
  • usw.

Zu Beginn des Artikels wird auch gleich auf 50 Extremely Useful And Powerful CSS Tools verwiesen, was man sich auch mal ansehen sollte… Nur die Zeit müsste man haben.

Written by webdevteam

Januar 29, 2009 at 10:05 am

Veröffentlicht in Uncategorized

Tagged with ,