 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
qualidat
Threadersteller
Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: 
|
Verfasst Do 15.08.2013 10:05
Titel Tutorial: Fonts in Webseiten einbetten (keine ext. Source) |
  |
|
Hier mal eine interesante Variante der inzwischen bekannten Webfont-Technologie. Mittels Webfonts ist es möglich, per CSS Schriftarten in Websites zu benutzen, die nicht lokal beim User vorhanden sind. Dazu wird ein rel. einfach zu durchschauender CSS-Befehl "font-face" benutzt. Hier zunächst ein konventionelles Beispiel, das auf das Nachladen des Fonts per src-Attribut zurückgreift:
| Code: |
@font-face { font-family:myfont ; src: url(myfont.ttf); }
|
Der Verweis auf die Fontdatei steckt hier in der URL-Funktion, in diesem Falle ohne Pfadangabe, d.h. die TTF-Datei muss auf der selben Ordnerebene liegen, wie die nutzende HTML-Datei. Verwendet wird die per font-face definierte Schriftart dann in gewohnter Weise, z.B.:
| Code: |
<p style="font-family:myfont">test text tralala</p>
|
Richtig "cool" wird das Feature, wenn man die Schriftdaten direkt mit in die HTML-Datei einbettet, so dass man auf externe Referenzen verzichten kann. Dann kan man z.B. HTML-Dokumente weitergeben, ohne die Schrift zusätzlich mitliefern zu müssen. Das funktioniert, wenn man die Fontdatei in einen Base64-kodierten Datenstrom umwandelt und direkt im Sourcecode unterbringt. Im CSS sieht das dann so aus:
| Code: |
@font-face{
font-family:myfont;
src:url("data:font/truetype;base64,AAEAAAAM...AE==");}
|
Bei den Daten, beginnend nach "...base64," ... bis "); handelt es sich im eine lange (!) Zeichenkette, OHNE Leerzeichen davor und danach und OHNE Zeilenumbruch. Man kann diese z.B. mit dem von mir kostenlos bereitgestellten Tool "B64Encoder" erzeugen. Man öffnet damit die Fontdatei (Truetype oder Opentype, Angaben zum Datentyp bei "font/..." müssen entsprechend angepasst werden), "linebreak" aus und danach befinden sich die kodierten Daten in der Zwischenablage und können in den Sourcecode eingesetzt werden.
Hier gibts das Tool für Mac: http://www.qualidat.com/webfonts/b64encoder-mac.zip
Hier gibts das Tool für Win: http://www.qualidat.com/webfonts/b64encoder-win.zip
Und hier eine Testseite, basierend auf der beschriebenen Technologie: http://www.qualidat.com/webfonts/test.html
Zuletzt bearbeitet von qualidat am Do 15.08.2013 10:08, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Do 15.08.2013 11:15
Titel
|
|
|
Danke, aber darf ich sagen, dass es das schon sehr lange gibt ^^"
Auch mit x-height matching, custom subsets (nur westliche Zeichen etc.) und insgesamt sehr sehr komfortabel auf http://www.fontsquirrel.com/tools/webfont-generator
Die HTML-Preview Dateien geben dann auch einen groben Überblick, ab welcher Größe die Punzen verkleben etc.
edit: typo
Zuletzt bearbeitet von ChrisKam am Do 15.08.2013 11:16, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
glorifiziertesIch
Dabei seit: 16.08.2013
Ort: -
Alter: 37
Geschlecht:
|
Verfasst Mo 26.08.2013 13:26
Titel
|
|
|
sehr interessant trotzdem für die, die es nicht kannten 
|
|
| |
|
|
Platonis
Dabei seit: 05.09.2013
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Do 12.09.2013 19:32
Titel
|
|
|
|
Ich kannte es noch nicht - vielen Dank für den Tipp!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
input text - fonts einbetten
[Flash] - Fonts einbetten funktioniert nicht
Open Source CMS
Open Source CMS, Rainbow
open source - flash?
CMS / Open Source für exlusive Community
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
