Truetype med @font-face

7 svar · 935 visningar · startad av caze 22 okt. 2010

cazeMedlem sedan sep. 20016 059 inlägg

Frågan22 okt. 2010 10:27#1

Jag har börjat testa med att använda @font-face men märker att det inte fungerar i IE, oavsett version. Som jag har förstått det beror det på att IE inte stöder TTF och OTF som de flesta typsnitt är.

Hur gör ni med @font-face. Har sökt runt men hittar inte några Truetype typsnitt enligt filformatet. Är det bara att döpa om .OTF eller .TTF till .EOT?

Vill ju bara att det ska fungera och se snyggt ut i så många webbläsare som möjligt.

SPiNMedlem sedan mars 20007 896 inlägg

22 okt. 2010 11:26#2

IE kan läsa .eot-typsnitt (från v.6 t.o.m.!), som du skriver. Jag sitter med följande verktyg när jag konverterar mellan .ttf, .otf, .eot och .woff (.otf använder jag dock inte):

ttf2eot
sfnt2woff

Min @font-face-syntax ser ut som följer (bulletproof enligt Paul Irish):

@font-face {
  font-family: 'Fontens Namn';
  src: url('FontNamn.eot');
  src: local('&#9786;'),
         url('FontNamn.woff') format('woff'), url('FontNamn.ttf') format('truetype');
}

Detta kräver ju dock att du har typsnittet som .ttf från början.

BuddazMedlem sedan dec. 2009308 inlägg

22 okt. 2010 13:36#3

hej
Hittade den här länken http://sixrevisions.com/css/font-face-guide/ kanske kan vara något hittade en till http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Den första förklarar längre ner på sidan hur man gör för att det skall fungera i alla browser om jag fattar det rätt. den andra länken är bulletproof Väldigt intressant, första gången jag hör talas om det attributet. Gjorde bara en enkel google sökning så hittade jag dem sidorna, inte svårare än så. Länken till pulletproof förklarar allt så länge du kan läsa på engelska (hahaha)

MVH

Buddaz

aronMedlem sedan mars 2004485 inlägg

22 okt. 2010 13:39#4

Vi hade precis en tråd som handlade om detta lite:
http://www.webforum.nu/showthread.php?t=180803

Värd att kika lite på kanske.

cazeMedlem sedan sep. 20016 059 inlägg

26 okt. 2010 07:17#5

Nu har jag lagt upp det enligt "bulletproof" men ändå så visar den fel i flera olika webbläsare. Se https://www.guldpunkten.se Någon som kan se om jag gjort något fel?

SPiNMedlem sedan mars 20007 896 inlägg

26 okt. 2010 07:22#6

Vilka är flera olika webläsare? Fungerar i Firefox, Chrome, Safari och Opera här hos mig. IE har jag ingen möjlighet att testa i just nu.

cazeMedlem sedan sep. 20016 059 inlägg

26 okt. 2010 07:25#7

Testade precis på kollegans jobbdator som har IE 8 där det inte fungerar. Enligt Adobe Browserlab fungerar det bara i hälften av webbläsarna oavsett om det är mac / windows.

cazeMedlem sedan sep. 20016 059 inlägg

26 okt. 2010 13:44#8

Någon som kan testa i IE?