ugrás a tartalomhoz

CSS3 @font-face gondok

Creative · 2010. Ápr. 11. (V), 23.06
Üdv ismét :)

Már máshol is feltettem e kérdést, de sajnos seholse kapok érdemi válaszokat. Van 3 betűtípus: Calibri, Lucida Sans Unicode és Trajan Pro Regular (hátha ismeri valaki őket). Ezek mind TrueType és OpenType betűtípusok. Weboldalamon css3-al alkalmaztam a használatukat, s konvertáltam őket a kellő kiterjesztésekbe is. Tehát mindhárom betűtípusomból van (eredeti kiterjesztésekkel együtt)5 változat(kivéve Calibri, az 4), melyeket az alábbiak szerint deklaráltam egy külön css-ben, amit főoldalról hívok be:

@font-face {
	font-family: 'Lucida Sans Unicode';
	src: url('lucon.eot');
}
@font-face {
	font-family: 'Lucida Sans Unicode';	
	src: url('lucon.ttf') format('truetype');
}
@font-face {
	font-family: 'Lucida Sans Unicode';	
	src: url('lucon.otf') format('opentype');
} 
@font-face {
	font-family: 'Lucida Sans Unicode';	
	src: url('lucon.woff') format('woff');
}
@font-face {
	font-family: 'Lucida Sans Unicode';	
	src: url('lucon.svg#lucon') format('svg');
}
Ezeknek elvileg FF3.5, IE8.0, Chrome4.1 és Safari4.0 böngészők alá kéne megmondani, mit kell tenniük. A CSS-ek és a fonttípusok is közös mappába vannak. Valakinek valami ötlete? tegnap óta dolgozom rajta, megnéztem már vagy 3tucat ezzel foglakozó weblapot, de egyikse korrekt valahogy :S

C.
‹ CKEditor és Java file browser/uppload Hírlevél ›
 ■
1

Demo

Török Gábor · 2010. Ápr. 12. (H), 09.34
Nem tudsz feltenni online egy demot?
2

Bulletproof

wiktor · 2010. Ápr. 12. (H), 09.57
Pont hétvégén vacakoltam én is ezzel. :)

Javaslom ezt a cikket, elég részletesen leír mindent, hogy mit kell csinálni, hogy minden böngésző rendesen megegye a deklarációt.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Illetve ezt a generátort, ami rögtön ki is dobja neked a megfelelő syntaxot.

http://www.fontsquirrel.com/fontface/generator
3

Trajan

Creative · 2010. Ápr. 12. (H), 12.50
Hali :)

Amit linkeltél, mindkettőt néztem már, de akárhogy idegelem magam, egy dolog nem oldódik meg :s Adobe BrowserLab -al tesztelem, milyen, ha nincs telepítve a böngészős gépre, kül ha böngészőbe nézem, jól mutatja. A Trajan Pro betűtípust se a Chrome, se az IE nem képes valamiért megjeleníteni :S
Egyébként ez a kódja:

@font-face {
 font-family: 'Trajan Pro';
 src: url('trajanproregular.eot');
 src: local('Trajan Pro'),
      local('TrajanPro-Regular'),
      url('trajanproregular.woff') format('woff'),
      url('trajanproregular.otf') format('opentype'),
      url('trajanproregular.svg#Trajan Pro') format('svg');
}
@font-face {
 font-family: 'Trajan Pro Bold';
 src: url('trajanprobold.eot');
 src: local('Trajan Pro'),
      local('TrajanPro-Bold'),
      url('trajanprobold.woff') format('woff') font-weight: bold,
      url('trajanprobold.otf') format('opentype') font-weight: bold, 
      url('trajanprobold.svg#Trajan Pro Bold') format('svg') font-weight: bold;
}
A gond az, hogy a Bold-ot simának jelöli, ha H2 -es elem stílusának rendelem hozzá. illetve, menülistára nem hajlandó még az említett két böngészőben hozzárendelni az alap normál betűtípusát a Trajannak :( Kül, ezer oldal ezer megoldás, mégse mind működőképes :s

C.
4

link?

wiktor · 2010. Ápr. 12. (H), 15.27
Hát ebből én így sajnos nem látom mi a gond. A boldolással én még nem szenvedtem, de ha egy linket tudnál küldeni az tényleg sokat segítene.
5

Link

Creative · 2010. Ápr. 12. (H), 16.02
Felraktam a fontot becsomagolva, benne az összes font, és a css maga :)
link: http://data.hu/get/2436286/trajan.zip.html

Ui: ez a bajosabb font, jobban szemlél szerintem, mint a másik

C.