Todsichere @font-face Syntax - Seite 3

web334 · #21 (**permalink**) 02.12.2009, 09:42

Zitat:

Zitat von EvT

und hier noch Hunderte von @font-face-Fonts, bei denen sogar schon die entsprechenden .eot-Dateien (!) mitgeliefert werden und - vor allem - die Lizenzrechte geklärt sind. Die Yanone ist auch dabei

Download Hundreds of @font-face Fonts

in welchem Browsern funktioniert das mit den Schriftarten von dieser Seite eigentlich und wo treten noch Probleme auf?

heiko_rs · #22 (**permalink**) 02.12.2009, 10:19

Selber Thread, Seite 1: http://xhtmlforum.de/58553-todsicher...tml#post445750

web334 · #23 (**permalink**) 02.12.2009, 13:48

Jetzt habe ich zu dem Zeug noch eine Frage:

wie sollte das alles am besten in der css-Datei definiert werden?

Auf der Seite Font Squirrel | Download Hundreds of Free @font-face Fonts sieht das Ganze folgendermaßen aus:

Code:

@font-face {
	font-family: 'DesyrelRegular';
	src: url('desyrel.eot');
	src: local('Desyrel Regular'), local('Desyrel'), url('desyrel.woff') format('woff'), url('desyrel.ttf') format('truetype'), url('desyrel.svg#Desyrel') format('svg');
}

body {
  font-family: 'DeseyrelRegular', Times, Times New Roman, serif;
}

Aber auf der Seite Web Open Font Format for Firefox 3.6 at hacks.mozilla.org wird das ganze wie folgt gelöst:

Code:

/* Gentium (SIL International) */
 
@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype");
}

body {
  font-family: GentiumTest, Times, Times New Roman, serif;
}

und etwas weiter unten auf der gleichen Seite wird es so gemacht:

Code:

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.eot);  /* for IE */
} 
@font-face {
  font-family: GentiumTest;
  /* Works only in WOFF-enabled browsers */
  src: url(fonts/GenR102.woff) format("woff"); 
}

body {
  font-family: GentiumTest, Times, Times New Roman, serif;
}

Was ist nun die beste Lösung?
Das ganze ist mir nämlich nicht klar beziehungsweise verwirrt mich etwas

andir · #24 (**permalink**) 03.12.2009, 18:00

Wenn Du alle verfügbaren Browser ansprechen willst, folge meinem Eingangspost (Link dort). Das ist die beste, mir derzeit bekannte Methode, weil sie alle @font-face fähigen Browser bedient.

web334 · #25 (**permalink**) 03.12.2009, 19:58

Danke für deine Antwort.

web334 · #26 (**permalink**) 04.12.2009, 10:22

Einen wunderschönen Guten Tag!

Die Sache mit diesem @font-face finde ich höchst interessant und hätte dazu auch noch ein paar Fragen:

1.
Wenn ich eine Schriftart von der Seite Johannes einbinde, dann wird diese deutlich kleiner angezeigt als zum Beispiel Arial. Ist das bei euch auch so?
Kann ich dieses Problem in der css-Datei folgendermaßen lösen?

Code:

p { font: 0.9em/1.5 Verdana, Arial, Helvetica, sans-serif; text-align: justify; }
p { font: 1.7em/1.7 'NotethisRegular'; text-align: justify; }

es sollte so funktionieren, dass wenn die Schriftart Notethis angezeigt werden kann (also das mit dem @font-face vom Browser unterstützt wird), diese in der Größe 1.7em angezeigt wird und für den Fall, dass das @font-face vom Browser nicht unterstützt wird, wird die Schriftart verdana mit einer Größe von 0.9em angezeigt

2.
Die für @font-face benötigten Dateien haben zum Beispiel eine Dateigröße von 250 kB. Ist das noch vertretbar? Es gibt nämlich immer noch viele, die nicht über DSL verfügen.
Werdet ihr @font-face demnächst beziehungsweise in absehbarer Zeit bei einer Webseite verwenden?

heiko_rs · #27 (**permalink**) 04.12.2009, 12:11

Zitat:

Zitat von web334

Code:

p { font: 0.9em/1.5 Verdana, Arial, Helvetica, sans-serif; text-align: justify; }
p { font: 1.7em/1.7 'NotethisRegular'; text-align: justify; }

Das funktioniert nicht. Die zweite Regel wird die erste komplett überschreiben, egal ob die Schrift vorhanden ist oder nicht. Derartige Bedingungen gibt es in CSS nicht.

Zitat:

Zitat von web334

Die für @font-face benötigten Dateien haben zum Beispiel eine Dateigröße von 250 kB. Ist das noch vertretbar?

Auf keinen Fall, 250 KB allein für eine Schriftdatei ist ein Wahnsinn.

Zitat:

Zitat von web334

Werdet ihr @font-face demnächst beziehungsweise in absehbarer Zeit bei einer Webseite verwenden?

Auf keinen Fall, zu schlechte Browserunterstützung. Was noch nicht mal in so modernen Browsern wie FX 3 und Opera 9 funktioniert, ist für mich indiskutabel. Abgesehen davon, dass auch die Performance einer Website für mich sehr wichtig ist.

Ich mache mir lieber etwas mehr Arbeit und habe dann eine performante Seite, die wirklich in quasi allen Browsern gleich aussieht (das geht bei mir runter bis IE 5.0, Opera 7.0 und NN 7.0).

web334 · #28 (**permalink**) 04.12.2009, 15:13

Danke für deine Einschätzung.

Kann man das Problem mit der Schriftgröße nicht irgendwie lösen?
Um die gleiche Schriftgröße wie zum Beispiel bei Arial mit 16px zu erzielen, muss man bei einigen Schriftarten von der Seite Font Squirrel | Download Hundreds of Free @font-face Fonts zum Beispiel 22 Pixel angegeben.

plastiko · #29 (**permalink**) 04.12.2009, 16:04

Dafür ist font-size-adjust gedacht.
Wird aber auch kaum unterstützt.

web334 · #30 (**permalink**) 04.12.2009, 19:28

Zitat:

Zitat von plastiko

Dafür ist font-size-adjust gedacht.
Wird aber auch kaum unterstützt.

Das wäre genau das richtige. Leider ist es in css2.1 nicht enthalten und wird nur von Firefox3.x unterstützt.
So eine Schei...

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Suche korrekte Syntax - JS -> PHP String	Scolex	Javascript & Ajax	4	17.05.2011 15:43
sql syntax fehler	RFDarter	Serveradministration und serverseitige Scripte	6	25.01.2011 22:42
syntax error, unexpected '{' ???	stubbi	Serveradministration und serverseitige Scripte	2	28.09.2010 23:04
Jquery Syntax Highlight Chili für Ruby/Bash/Rails	nYmo	Javascript & Ajax	0	10.11.2009 17:53
Wie parse ich mit php Markdown syntax nach html?	asdfgqw	Serveradministration und serverseitige Scripte	0	03.06.2008 00:11