Windows-skrifttypeproblemer med @ font-face i CSS

Indlæg af Hanne Mølgaard Plasc

Problem



Jeg har problemer med @ font-face på Windows-computere (ingen anden hvilken browser). Det virker okay i Linux og OSX.


Dette er den css kode, jeg bruger m (genereret med skrifttype-squirel)


Tjek screenshots for problemet. Der synes at være 2 problemer



  • I skrifttyper er 'danse' på Windows. De er ikke justeret på basislinjen.

  • På skrifttyper ser skrifttyperne ikke anti-aliased.



Nogen har en ide? Tak på forhånd.


Skærmbillede i OSX & Linux:


http://j3rn.org/images/ob\_font1.png[3]


Skærmbillede i Windows:


http://j3rn.org/images/ob\_font2.png[4]


CSS-kode


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

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

Bedste reference


Vi havde et lignende problem med nogle af vores skrifttyper, og jeg er helt sikker på, hvad der var fast, at det var at sætte 'Truetype Hinting' til 'Keep existing'.


Indtast billedbeskrivelse her

Andre referencer 1


Jeg havde det samme problem for nogle uger siden. Vi lagrer vektorgrafik i en skrifttypefil for at undgå at implementere separate billeder eller css sprites. En simpel løsning ville være at bruge f.eks. Skriftekorrel


http://www.fontsquirrel.com/tools/webfont-generator[5]


uden (!) optimeringsindstillingen, som behandler din skrifttype for at optimere den til internettet og sommetider bryder den på grund af komprimeringsforsøg, hvis de ikke overholder nogle standarder. En mulig ulempe kan være, at dine filer bliver lidt større. Du kan også prøve denne webservice:


http://fontface.codeandmore.com/indexnew.php[6]


Håber dette hjælper!

Andre referencer 2


Så vidt antialiasing går, kan vinduer være temmelig grimme, når der gengives tynd tekst. Et fælles trick er at forsøge at anvende et tekststreg som sådan:


-webkit-text-stroke: 0.3px


Hvad angår dit baseline problem, synes det at være et problem med den faktiske skrifttype. Hvis du ikke er knyttet til @ font-face, er jeg ret delvist til Google Webfonts [7]


Du skal bare inkludere et css link i dit overskrift og derefter vedhæfte den tilsvarende skrifttype til en css klasse.

Andre referencer 3


Går ud på en lem her, men jeg tror du uploadede (ulovligt?) Et pre-web-bygget alternativ til Helvetica i FontSquirrel.com s 'roll-your-own' @ ansigt-kit ... tisk tisk.


De resultater, du får, er ret typiske for, hvordan pc'er gør skrifttyper på skærmen.


FF Schulbuch Nord: Oprettet i 1991 ($ 239, hvis du vil købe den fra fontshop.com).
http://www.fontshop.com/fonts/singles/fontfont/ff\_schulbuch\_nord\_ot\_regular/u0026amp;s=c[8]


TexGyre på fontsquirrel er et ret retfærdigt (dog ikke så godt) alternativ til Helvetica, og det ser godt ud på pc'er, Mac'er osv.