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:
  1. @font-face {  
  2.     font-family: 'Lucida Sans Unicode';  
  3.     src: url('lucon.eot');  
  4. }  
  5. @font-face {  
  6.     font-family: 'Lucida Sans Unicode';   
  7.     src: url('lucon.ttf') format('truetype');  
  8. }  
  9. @font-face {  
  10.     font-family: 'Lucida Sans Unicode';   
  11.     src: url('lucon.otf') format('opentype');  
  12. }   
  13. @font-face {  
  14.     font-family: 'Lucida Sans Unicode';   
  15.     src: url('lucon.woff') format('woff');  
  16. }  
  17. @font-face {  
  18.     font-family: 'Lucida Sans Unicode';   
  19.     src: url('lucon.svg#lucon') format('svg');  
  20. }   
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:
  1. @font-face {  
  2.  font-family: 'Trajan Pro';  
  3.  src: url('trajanproregular.eot');  
  4.  src: local('Trajan Pro'),  
  5.       local('TrajanPro-Regular'),  
  6.       url('trajanproregular.woff') format('woff'),  
  7.       url('trajanproregular.otf') format('opentype'),  
  8.       url('trajanproregular.svg#Trajan Pro') format('svg');  
  9. }  
  10. @font-face {  
  11.  font-family: 'Trajan Pro Bold';  
  12.  src: url('trajanprobold.eot');  
  13.  src: local('Trajan Pro'),  
  14.       local('TrajanPro-Bold'),  
  15.       url('trajanprobold.woff') format('woff') font-weight: bold,  
  16.       url('trajanprobold.otf') format('opentype') font-weight: bold,   
  17.       url('trajanprobold.svg#Trajan Pro Bold') format('svg') font-weight: bold;  
  18. }  
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.