[css] Font-face in WP7.5 Mango

[_Thanatos_]

Volgens CSS3Test ondersteunt Windpows Phone 7.5 de @font-face declaratie. Als je die site runt op een WP7.5 emulator, dan krijg je daar een mooi groen vlak. Toch krijg ik @font-face niet aan de praat. Op alle andere HTML5/CSS3 capable devices en browsers werkt het prima... Dat is dus inclusief Android 2.3/4.0 en iOS 4.2/5.0. Maar ook desktops natuurlijk.

Cascading Stylesheet:

@font-face {
    font-family: 'YanoneKaffeesatzThin';
    src: url('../font/YanoneKaffeesatz-Thin-webfont.eot');
    src: url('../font/YanoneKaffeesatz-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/YanoneKaffeesatz-Thin-webfont.woff') format('woff'),
         url('../font/YanoneKaffeesatz-Thin-webfont.ttf') format('truetype'),
         url('../font/YanoneKaffeesatz-Thin-webfont.svg#YanoneKaffeesatzThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

Dit is standaard spul van FontSquirrel en syntactisch ziet het er ook gewoon perfect uit. Ik begrijp dus niet waar het probleem kan zitten

De "wat heb je al geprobeerd" gaat hier dus niet op, want volgens mij doe ik het gewoon goed. En nee, het is écht niet de eerste keer dat ik fonts op een website gebruik - alleen de eerste keer dat ik het met een mobiel OS van MS test. Ik hoef eigenlijk alleen maar te weten wat de juiste notatie is voor WP7.5 om het op te pikken.

Iemand weet dat vast wel

[Bosmonster]

En zonder de IE hacks?

edit: ah.. het werkt gewoon niet
http://blogs.msdn.com/b/t...e-of-windows-phone-7.aspx

Downloadable fonts such as EOT, TTF/OTF and WOFF fonts. Whilst the font-face tag is supported the mobile browser will not attempt to download these font.

edit2: Je zou het nog via base64 kunnen proberen te includen, als het downloaden het probleem is.

[ Voor 121% gewijzigd door Bosmonster op 19-03-2012 16:48 ]

[_Thanatos_]

Hm. Beetje rare actie van MS. Hebben ze eindelijk een browser waar standards-compliant font-face ondersteuning in zit, gaan ze het kreupel maken voor een device die zonder al (let's face it) kreupel is. Ik had eigenlijk gehoopt dat ze deze bug (want dat is het in mijn ogen) in 7.5 wel gefixt hadden. Maar het is alleen maar features, features, features! (Niet echt eigenlijk).

Maar genoeg rants
Base64 lijkt idd wel een goed idee, nooit geprobeerd... Jammer alleen dat de CSS dan zo bloated wordt. Zou er een "mobile IE9 only" manier zijn? Misschien een conditional comment i.c.m. media query... Maar dat downloadt em ook naar een desktop IE9 die toevallig klein genoeg is.