php.de

Zurück   php.de > php.de Intern > Beitragsarchiv > Adventskalender 2008

 
 
LinkBack Themen-Optionen
Alt 04.12.2008, 00:00  
Adventskalenderöffner
 
Benutzerbild von Nikolaus 2.0
 
Registriert seit: 27.11.2008
Beiträge: 72
PHP-Kenntnisse:
Fortgeschritten
Nikolaus 2.0 ist einfach richtig nettNikolaus 2.0 ist einfach richtig nettNikolaus 2.0 ist einfach richtig nettNikolaus 2.0 ist einfach richtig nettNikolaus 2.0 ist einfach richtig nett
Standard 100: Die Type und das Web

100:
Typographie im Internet ist seit jeher ein leidiges Thema. Kein Browser unterstützt vernünftige Silbentrennung, Ligaturen und, und und…
Das größte Problem ist aber die geringe Auswahl an Schriftarten. Jede Schriftart, die man auf einer Seite verwenden will, muss auch auf dem Rechner des Benutzers installiert sein und besonders ausgefallene oder besonders schöne Schriften sind meist nicht vorhanden. Wie schafft man sich also Abhilfe? Dazu gibt es verschiedene Varianten. Die erste ist ganz simpel und stellt eigentlich gar keine Lösung dar:

1. Viele Alternativschriftarten
Möglich ist z.B. soetwas:
Code:
font-family: 'Trebuchet MS', Calibri, Tahoma, Verdana, Arial, Helvetica, sans-serif;
Wer das Glück hat, ein neueres Windows (XP) zu besitzen, der bekommt die wunderschöne Trebuchet MS zu Gesicht (welche übrigens auch die Content-Schriftart dieses Adventskalenders ist). Danach wird Calibri (Windows Vista) angewandt, ist diese nicht vorhanden, geht es mit der Schönheit immer weiter abwärts, bis irgendwann sans-serif erreicht ist, was dem Browser sagt, er solle gefälligst irgendeine serifenlose Schriftart benutzen.
Schnell stößt man aber an die Grenzen dieser „Lösung“ und eigentlich behebt sie das Problem nicht. Deshalb gibt es noch andere Möglichkeiten.

Wer dennoch mit dieser Möglichkeit arbeiten will, der sollte sich unbedingt mal den Typetester ansehen, mit dessen Hilfe sich Schriftarten im Fließ- und Kontext ansehen und prüfen lassen.

2. Font-Replacement
ACHTUNG! Ganz zu Anfang: diese Methode sollte wirklich nur bei Überschriften eingesetzt werden, für Fließtext eignet sie sich nicht, weshalb die Technik meist auch Header-Replacement genannt wird.
Beim Font-Replacement erstellt man eine Grafik mit dem gewünschten Text in der gewünschten Schriftart. Diese setzt man aus Gründen der Barrierefreiheit aber natürlich nicht direkt per <img>-Tag in den HTML-Code ein. Nein! Im Gegenteil, man schreibt den Text ganz normal wie gewohnt.
Code:
<h1 id="header-foobar">Foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
Hier lässt sich nun einiges mit CSS machen. In diesem Falle soll die Überschrift durch die Grafik ersetzt werden.
Code:
#header-foobar {
    background: url('your-image.png') no-repeat;
    text-indent: -999em;
    height: 30px;
    width: 150px;
}
Zunächst wird die Grafik als Hintergrundgrafik angelegt. Danach wird der Text um -999em aus dem Bild geschoben. Welcher Wert nun genau genommen wird, ist egal. Hauptsache, die Schrift ist nicht mehr sichtbar. Der Text wird wirklich nur zur Seite geschoben und bleibt auf diese Weise noch markierbar, auch wenn dies natürlich bei weitem nicht so komfortabel ist, wie bei sichtbarem Text.
Die Höhe und die Breite schlussendlich müssen mit Höhe und Breite der Grafik übereinstimmen, sonst wird diese evtl. abgeschnitten.

2. @font-face
@font-face ist eine Regel zum Einbinden von Schriftarten unter Angabe deren URL (z.B. auf dem Server, aber auch Schriftarten, die lokal auf dem Benutzercomputer liegen, lassen sich einbinden). Allerdings wird diese Regel nur sehr mangelhaft bis gar nicht unterstützt und ist deshalb nicht im CSS 2.1-Standard enthalten, wird aber wahrscheinlich Teil der CSS 3-Spezifikation sein. Derzeit unterstützt nur der Safari ab Version 3.1 diese Regel und Firefox soll in Version 3.1 ebenfalls nachlegen.
Aber wie funktioniert dies denn nun?
Die Regel @font-face wird zunächst wie ein normaler CSS-Selektor behandelt:
Code:
@font-face {
    font-family: FontName;
    src: url('pfad/zur/datei.ttf') format('truetype');
}
Innerhalb von @font-face { … } können auch noch weitere bekannte Eigenschaften notiert werden, die sich auf die Schriftart beziehen, wie font-weight, font-variant etc.
font-family enthält den Namen der Schriftart und src den Pfad. Der Parameter format(…) ist optional (es existiert auch noch eine Handvoll weiterer Parameter) und gibt den Typ der Schriftart an, in diesem Falle TrueType; neben TrueType wird auch OpenType unterstützt.
Um nun diese Schriftart auf die Überschrift anzuwenden, muss man nur noch den soeben festgelegten Schriftnamen benutzen:
Code:
#header-foobar {
    font-family: FontName;
}
That's it!
Leider noch nicht salonfähig, aber das wird sicherlich noch. Einige wenige Browser unterstützen es ja bereits und optional kann man es sicherlich schon anbieten.

3. Links zum Thema
Und da dies nicht das einzige Tutorial zum Thema ist, hier noch einige Links:
Nikolaus 2.0 ist offline  
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 04.12.2008, 00:35  
Erfahrener Benutzer
 
Registriert seit: 07.06.2008
Beiträge: 993
PHP-Kenntnisse:
Fortgeschritten
Frank befindet sich auf einem aufstrebenden Ast
Frank eine Nachricht über ICQ schicken Frank eine Nachricht über MSN schicken Frank eine Nachricht über Yahoo! schicken
Standard

Oh mann! ich liebe diesen Adventskalender. Man findet immer wieder was nützliches, was man vorher noch nicht kannte (vorallem auf die Links bezogen)

*freu*
__________________
Frank ist offline  
Alt 04.12.2008, 01:01  
Erfahrener Benutzer
 
Benutzerbild von tomtaz
 
Registriert seit: 17.06.2008
Beiträge: 1.762
PHP-Kenntnisse:
Fortgeschritten
tomtaz ist einfach richtig netttomtaz ist einfach richtig netttomtaz ist einfach richtig netttomtaz ist einfach richtig netttomtaz ist einfach richtig nett
tomtaz eine Nachricht über ICQ schicken tomtaz eine Nachricht über Skype™ schicken
Standard

Zitat:
Zitat von Frank Beitrag anzeigen
Oh mann! ich liebe diesen Adventskalender. Man findet immer wieder was nützliches, was man vorher noch nicht kannte (vorallem auf die Links bezogen)

*freu*
Da muss ich dir zustimmen. Mal abgesehen von den Sortierfehler eine echt gelungene Idee...
__________________
Mfg Tomtaz
"Es soll jetzt diese Erfindung geben.... Kugel oder so heißt die. Ist so eine Art Suchmaschine..."
tomtaz ist offline  
Alt 04.12.2008, 08:27  
PTC
Erfahrener Benutzer
 
Benutzerbild von PTC
 
Registriert seit: 27.10.2007
Beiträge: 1.708
PHP-Kenntnisse:
Anfänger
PTC ist einfach richtig nettPTC ist einfach richtig nettPTC ist einfach richtig nettPTC ist einfach richtig nett
Standard

Und man merkt's: Man lernt nie aus.
PTC ist offline  
Alt 04.12.2008, 08:43  
Erfahrener Benutzer
 
Benutzerbild von byFd
 
Registriert seit: 06.11.2008
Beiträge: 154
byFd befindet sich auf einem aufstrebenden Ast
Standard

ja echt super das ding.
ich hoffe das bleibt erhalten, damit man in zukunft (falls man irgendwas davon mal braucht) nachschlagen kann
byFd ist offline  
Alt 04.12.2008, 09:18  
Erfahrener Benutzer
 
Registriert seit: 16.07.2005
Beiträge: 1.007
PHP-Kenntnisse:
Fortgeschritten
brian johnson befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von tomtaz Beitrag anzeigen
Mal abgesehen von den Sortierfehler eine echt gelungene Idee...
ich glaube, da es keinen 100. Dezember gibt, haben die herren es jetzt wirklich auf binär umgestellt. 100 === 4
__________________
PHP4?!?>>>Aktuelle PHP Version: 5.2.11 || 5.3.0
Suse 11.2 *vorfreude*
brian johnson ist offline  
Alt 04.12.2008, 16:42  
Supermoderator HD
 
Benutzerbild von Manko10
 
Registriert seit: 16.03.2008
Beiträge: 8.425
PHP-Kenntnisse:
Fortgeschritten
Manko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende Zukunft
Standard

Also echt… So ein dämlicher Nikolaus!
Erst lässt er den 2. bis 9. aus und dann weiß er noch nichteinmal, wie viele Tage der Dezember hat!
__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems
Manko10 ist offline  
Alt 04.12.2008, 16:51  
PTC
Erfahrener Benutzer
 
Benutzerbild von PTC
 
Registriert seit: 27.10.2007
Beiträge: 1.708
PHP-Kenntnisse:
Anfänger
PTC ist einfach richtig nettPTC ist einfach richtig nettPTC ist einfach richtig nettPTC ist einfach richtig nett
Standard

Zitat:
Zitat von Manko10 Beitrag anzeigen
Also echt… So ein dämlicher Nikolaus!
Erst lässt er den 2. bis 9. aus und dann weiß er noch nichteinmal, wie viele Tage der Dezember hat!
Ey, lass den Nikolaus in Ruhe!
PTC ist offline  
Alt 04.12.2008, 20:09  
Erfahrener Benutzer
 
Registriert seit: 16.07.2005
Beiträge: 1.007
PHP-Kenntnisse:
Fortgeschritten
brian johnson befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manko10 Beitrag anzeigen
Also echt… So ein dämlicher Nikolaus!
Erst lässt er den 2. bis 9. aus und dann weiß er noch nichteinmal, wie viele Tage der Dezember hat!
naja, bei dem was die paparazzi heute entdeckt haben....
__________________
PHP4?!?>>>Aktuelle PHP Version: 5.2.11 || 5.3.0
Suse 11.2 *vorfreude*
brian johnson ist offline  
Alt 04.12.2008, 20:12  
Supermoderator HD
 
Benutzerbild von Manko10
 
Registriert seit: 16.03.2008
Beiträge: 8.425
PHP-Kenntnisse:
Fortgeschritten
Manko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende ZukunftManko10 hat eine strahlende Zukunft
Standard


Das ist aber der Weihnachtsmann, nicht der Nikolaus.
__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems
Manko10 ist offline  
 


Themen-Optionen

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
input type file auf ordner beschränken ? cytrobic HTML, Usability und Barrierefreiheit 13 14.08.2010 21:17
Objekte: Next() durch foreach() erstetzt - Object of type variant did not create... badrandolph PHP Tipps 2008 7 26.11.2008 19:14
Wireshark SSL Handshake debugging-Handshake protokoll mittels PHP + Curl brian johnson Off-Topic Diskussionen 0 06.11.2008 11:54
XAMP gehts, auf realer server nicht: Fehler: Cannot use object of type ... as array mysteryxxx PHP-Fortgeschrittene 4 03.08.2008 18:08
[Erledigt] type image button funzt im IE nicht? litterauspirna HTML, Usability und Barrierefreiheit 12 19.07.2008 15:59
Type Hinting - must be an instance of integer, integer given mAy^daY PHP Tipps 2007 1 06.03.2007 14:55
CHMOD Problem: Inappropriate file type or format JoeDoe.asd PHP Tipps 2006 7 03.07.2006 10:46
Fatal error: Cannot use object of type FPDF as array in Alpha Centauri PHP Tipps 2006 5 22.03.2006 14:44
[Erledigt] string type numerisch abfragen Datenbanken 2 19.03.2006 11:12
ftp_put: Type set to I PHP-Fortgeschrittene 2 26.09.2005 18:06
[Erledigt] input type wird nicht korrekt gefüllt PHP Tipps 2005-2 5 11.07.2005 12:55
Wrong data type for start key PHP-Fortgeschrittene 3 05.07.2005 22:14
Wrong data type for start key PHP Tipps 2005-2 3 05.07.2005 20:35
PHP 5 installation PHP Tipps 2005-2 6 16.06.2005 14:19
Problem mit Wasserzeichen auf Bildern pixelcut PHP-Fortgeschrittene 16 14.12.2004 02:36

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
schöne webschriften, schöne webschrift, calibri webschrift, fpdf calibri, schönste webschrift, die schÖnsten webschriften, calibri barrierefrei, calibri fpdf, schönsten webschriften, barrierefreie schriften calibri, die schönste webschrift, web-php.de, fpdf silbentrennung, schönste webfont, fpdf verdana einbinden, calibri barrierefreie schrift, erste hilfe filetype .gif, schönster webfont, barrierefrei font replacement, google webfonts ssl

Alle Zeitangaben in WEZ +1. Es ist jetzt 09:21 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum