[CSS/IE8] Geen font smoothing

[kevinr1]

Beste,

Ik ben bezig met het bouwen van een website lukt allemaal prima op 1 puntje na. De Font Smoothing in IE8.
In Firefox/Chrome/IE9/Opera werkt het allemaal prima.
De font pakt ie wel, maar hij maakt hem niet vloeiend, de bekende "CSS Reset" staat ook in mijn CSS.

Wat er in mijn CSS te vinden is:

Cascading Stylesheet:

html, body  { 
    height: 100%;   
    }

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

body        { 
    font-family: 'VollkornRegularRegular', serif;
    line-height: 18px;  
    background: url(../Images/background.jpg) repeat; 
    }

h1          { 
    font-family: 'VollkornRegularRegular', serif;
    font-size: 1.01em;
    }
    

font smooth:{ always; }

Font is werkend en gemaakt vanuit de bekende font squirrel.


Wat ik al geprobeerd heb:
[via google]
- IE8 Font Hack
- Diverse -mox webkit aanpassingen
- px wijzigen in em
-

Geen van deze aanpassingen had effect, ik ben ten einde raad.
Ik probeer dit probleem echt op te lossen en 'plaats hier niet zomaar' een post, ik heb van alles geprobeerd.
Ik heb proberen te zoeken naar een oplossing maar kan deze nog steeds niet vinden.

[RobIII]

En 't staat niet gewoon uit ofzo?


Cleartype/fontsmoothing werkt wel op andere sites of onder/met andere applicaties op die PC?

[ Voor 30% gewijzigd door RobIII op 06-06-2012 17:00 ]

[OkkE]

Ik heb ook het vermoeden dat het is wat RobIII zegt.

Waarom gebruik je overigens niet de Google Webfonts versie?
http://www.google.com/webfonts/specimen/Vollkorn

[kevinr1]

Nee, dit is met meerdere pc's in IE8, ( Windows 7 en Xp varianten ).
( Zelfs reset gedaan van alle instellingen en een Fresh install Xp incl. alle updates )
Ik ben bang dat dit CSS gerelateerd is.

Graag zou ik het ook in CSS willen wijzigen, omdat dit ook netter is.
Ook de fonts van Google gebruikt, werkt ook niet. (Zoals gewoonlijk bij Firefox en Chrome wel )


@Roblll

kevinr1 schreef op woensdag 06 juni 2012 @ 16:56:

In Firefox/Chrome/IE9/Opera werkt het allemaal prima.

[ Voor 34% gewijzigd door kevinr1 op 06-06-2012 17:53 ]

[RobIII]

kevinr1 schreef op woensdag 06 juni 2012 @ 17:49:

@Roblll

[...]

Op diezelfde PC was de crux

Als je op jsfiddle.net eens een simpele testcase neer zet? (a-la zoiets)

[edit]

Cascading Stylesheet:

font smooth:{ always; }​

Moet sowieso:

Cascading Stylesheet:

font-smooth:{ always; }​

zijn.

[ Voor 46% gewijzigd door RobIII op 06-06-2012 18:01 ]

[kevinr1]

Ben totaal niet bekend met dat programma/werking ervan. Geen idee hoe ik dat zou moeten aftesten.
(Ik wil meewerken maar dat wordt lastig als ik onbekend ben in die programmatuur).


Hieronder nog even snel een voorbeeldje:

[ Voor 58% gewijzigd door kevinr1 op 06-06-2012 18:23 ]

[Wokkels]

Ah, dit heb ik ook een keer gehad. Gebruik je transparantie in de achtergrond van je divs? Probeer dat eens uit te zetten, dan heb je er geen last meer van waarschijnlijk.

[kevinr1]

Dit stond eerst uit, vervolgens met een ie8 hack aangezet..... Geen effect.
Misschien heb ik deze over het hoofd gezien. Ik controleer deze als ik tijd heb.

[ Voor 18% gewijzigd door kevinr1 op 06-06-2012 21:44 ]

[RobIII]

kevinr1 schreef op woensdag 06 juni 2012 @ 21:24:
Body-transparant: {
Size 100%;}

Waar haal je die vandaan? Die slaat als een tang op een varken

[crisp]

font-smooth lijkt me ook redelijk nutteloos en het was sowieso bedoelt als een property - voordat het weer uit de CSS3 draft werd verwijderd

[ Voor 35% gewijzigd door crisp op 06-06-2012 21:38 ]

[kevinr1]

Naar mijn idee heb ik geen transparantie actief.
Aangezien de code openbaar beschikbaar is kan ik de link naar de code denk ik wel hier plaatsen.

(Ik probeer geen reclame te plaatsen)


Klik hier voor de CSS
Er wordt geen aparte IE8 css gebruikt, dit is de enigste.

De MS-Filter moet gebruikt worden voor de 'shadowing' rondom de pagina.

[ Voor 35% gewijzigd door kevinr1 op 06-06-2012 21:43 ]

[Wokkels]

Zet alle eyecandy als shadows en evt gradients ook eens uit. Met name de filters voor ie.

[crisp]

kevinr1 schreef op woensdag 06 juni 2012 @ 21:42:
[...]
De MS-Filter moet gebruikt worden voor de 'shadowing' rondom de pagina.

En ik weet wel zeker dat dat ook de oorzaak is...

en moeten is dwang, en er is niets mis met 'dan maar wat minder eyecandy' in een toch al verouderde browser

[ Voor 15% gewijzigd door crisp op 06-06-2012 23:22 ]

[Wokkels]

Wat crisp zegt dus. Ik heb het toen opgelost met een nep-transparante background voor m'n divs voor IE8 en geen shadows e.d.
Ik ondersteun dat fossiel gewoon niet 100% meer. De site is leesbaar maar ziet er iets minder mooi uit in IE8, ik zal er geen nacht minder om slapen.

[kevinr1]

Bedankt voor de reacties en waarschijnlijk het probleem hebben gevonden.
Dit probleem moet ik dus afvangen op een andere manier.

Inderdaad de -ms filter verwijderd en voila, super mooie tekst.
Zeer vervelend -.-

Ik ga mij dus focussen op de hints van crisps.
Bedankt!

(Now let this thread die in peace)

[ Voor 41% gewijzigd door kevinr1 op 07-06-2012 08:43 ]

[kevinr1]

Ugh, wij falen hard.
Uiteindelijke oplossing:

Cascading Stylesheet:

.shadow {
    background-color: #fff;
    
    /*Shadow Effect*/
    -moz-box-shadow: 0px 0px 10px #999; 
    -webkit-box-shadow: 0px 0px 10px #999; 
    box-shadow: 0px 0px 5px 5px #999;
         
   margin-left: -5px;
   margin-top: -5px;
   
   zoom: 1;
   background-color: white;
   -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='black') progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Shadow(Color='#cccccc', Strength=5, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color='#cccccc', Strength=5, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color='#cccccc', Strength=5, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color='#cccccc', Strength=5, Direction=270),
           progid:DXImageTransform.Microsoft.Shadow(Color='#cccccc', Strength=5, Direction=360);
          
    }