[IE Rendering] Blurry font in IEx, ongeacht ClearType

[NeilForeal]

Tweakers!

Ik heb een probleem! Ik heb een website gemaakt en mijn klant kan het font in de browser niet lezen. Nu ben ik op de hoogte van het feit dat IE fonts anders rendert, maar deze situatie is uniek in de zin dat echt veel mensen het niet kunnen lezen. Mijn klant heeft wat mensen gebeld en 6 van de 11 mensen hebben hetzelfde probleem. In mijn eigen internet explorer (zowel versie 8 als 9) is het font wel anders gerendert, maar niet onleesbaar.

Ik heb tijden lopen klieren en alle instellingen zijn bij de computer van cleartype uit, cleartype aan, bij internet opties -> geavanceerd -> multimedia - > altijd cleartype gebruiken etc. Alles uitgevinkt, aangevinkt, computer gereboot, alles geprobeerd. Het is nog steeds onleesbaar.

Nu dacht ik dat het probleem toch ergens in de website moet liggen, aangezien mijn klant het verder niet bij andere websites heeft. Ik heb wat javascripts zoals cufon uitgeschakeld maar dat gaf ook geen soelaas.

Ik heb daarna ook nog wat ex collega's en andere web developers gevraagd of zij wisten hoe dit kwam, maar daar kwam helaas ook niets uit. Nu hoop ik dat jullie mij kunnen helpen bij het oplossen van dit vreemde probleem.

De website is: *even nog niet relevant*

Hier het verschil tussen mijn eigen IE en Webkit:

[ Voor 3% gewijzigd door RobIII op 30-03-2011 15:42 ]

[Fish]

cleartype moet je ook tunen
http://www.microsoft.com/...leartype/tuner/step1.aspx

[RobIII]

Ik zou eens beginnen zaken als cufon e.d. eruit te laten en met een uitgeklede testcase
Dat betekent: Een kaal HTML-etje met een enkele paragraaf en een paar regels CSS om het probleem te reproduceren. En van daar uit ga je verder kijken

[NeilForeal]

ClearType tunen heb ik telefonisch met de klant doorgenomen, dat zou goed moeten zijn. Daarnaast zoals ik ook in de openingspost zei alles getest wat betreft Cleartype. Uitzetten, rebooten, kijken, aanzetten, rebooten, kijken etc. Dat maakt gek genoeg geen verschil.

@RobIII
Javascripts heb ik uitgezet maar het probleem was er nog steeds.
Ik heb meteen even een html bestand aangemaakt met een titel en wat p tags. Ik heb de url doorgestuurd en ik ben benieuwd wat eruit komt.

Thanks for the input so far.

[ Voor 6% gewijzigd door NeilForeal op 30-03-2011 15:56 ]

[Bosmonster]

Heb je een screenshot van hoe het er bij de klant uitziet? Want het is mij nu niet helemaal duidelijk wat er precies "onleesbaar" verstaan wordt.

[NeilForeal]

Het volgende valt volgens mijn klant onder 'onleesbaar':



Ik moet zeggen, het ziet er ook wel slecht uit.

Het verhaal wordt overigens nog gekker. Bij mijn klant ziet de pagina 'Prijslijst' er super goed uit. Zowel het menu als de tekst in het contentvak zijn precies zoals ze moeten zijn. Op alle andere pagina's is dat niet zo. Nu wil het geval dat op de prijs pagina alles in een tabel staat. Rendert IE fonts in een tabel niet? Of in een bepaalde specifieke situatie? Weer een puzzelstukje. Dat ziet er namelijk zo uit:



Bij mijn versie van IE (IE9) is er geen verschil tussen de pagina's.

[ Voor 66% gewijzigd door NeilForeal op 30-03-2011 18:06 ]

[RobIII]

Over welke versie(s) van IE gaat 't dan bij je klant? En gebruik je nou wel of geen cufon (of andere 'text replacement')? En wat doet je testcase? Wat kun je met je/een testcase wel en niet reproduceren?

Je zult toch echt zelf wat moeite moeten doen; misschien doe je dat wel maar wij kunnen met wat je tot op heden post weinig aanvangen

[Fish]

Je hoge jpeg compressie helpt niet aan de leesbaarheid.

Ik geloof dat de compatability modus ook wel een kan verschillen. Hier zie ik geen verschil btw

[geert1]

Heel bizar dit. Zonder de code te zien valt er weinig over te zeggen. Paar willekeurige dingen die in me opkomen:

- Gebruik je scripts die iets met het uiterlijk van je site doen? Text replacement zoals al genoemd, of IE6 PNG fixes, Javascript die CSS3-ondersteuning geeft, scripts die text-resizing aanbieden, dat soort dingen? Laad je externe scripts of frameworks in? Probeer dat soort dingen eens uit te schakelen.

- Zet je gekke css-eigenschappen in je pagina? Probeer eens zonder css de pagina te bekijken. Wordt de pagina dan goed getoond, zet dan steeds meer stukken van je stylesheet weer "aan", en kijk wanneer het probleem terug komt.

- Gebruik je "gewoon" Arial in je stylesheet, of een exotische variant daarop of zo? Laad je het font in via @font-face misschien (wat bij Arial nergens op slaat, maar wie weet)? Check alle font-family-declaraties in je css eens op gekke dingen.

- Staat de zooming in je browser wel op 100%? Domme vraag misschien, maar wie weet.

- Het is toch wel actieve tekst hoop ik, en niet tekst in een afbeelding?

- Gebruik je een fatsoenlijke doctype en bevat je html / css validatie-fouten?

[ Voor 5% gewijzigd door geert1 op 30-03-2011 20:21 ]

[Bosmonster]

Het ziet er inderdaad uit als een ander font dat gebruikt wordt op sommige plekken, wat mogelijk op een CSS-foutje ergens kan duiden. Bijvoorbeeld Helvetica ziet er onder Windows vaak niet zo denderend uit,

[Booster]

Ik heb de site even bekeken, en wat mij opvalt is dat ik in IE8 helemaal geen cleartype heb op enkel jouw webpagina. En het effect bij de klant ziet er uit als een CSS schaduw oid.

Even IE devtools gebruikt. Comment #hoofdkader eens uit. Daar zit een zut filters in. Denk dat je dan snel bij de oplossing bent. Als ik hem uitzet, gebruikt mijn IE weer gewoon ClearType in ieder geval. Welke regel het precies in zit weet ik niet, maar ik vermoed de bovenste.

code:

progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');
MARGIN: 20px 0px;
MIN-HEIGHT: 545px;
BACKGROUND: #ccc;

-moz-box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000

[ Voor 49% gewijzigd door Booster op 31-03-2011 09:11 ]

[10goto10]

NeilForeal schreef op woensdag 30 maart 2011 @ 18:01:
Het verhaal wordt overigens nog gekker. Bij mijn klant ziet de pagina 'Prijslijst' er super goed uit. Zowel het menu als de tekst in het contentvak zijn precies zoals ze moeten zijn. Op alle andere pagina's is dat niet zo. Nu wil het geval dat op de prijs pagina alles in een tabel staat. Rendert IE fonts in een tabel niet? Of in een bepaalde specifieke situatie?

Ik kan me niet voorstellen dat dit invloed heeft het daadwerkelijke renderen, maar niet alle globale (bijv. op de BODY) gezette font styles worden toegepast op TABLEs, met name font-size. Misschien is het font in de TABLE daarom kleiner dan in de rest van je pagina, waardoor hij meer last heeft van anti-alias artifacten?

Overigens zien fonts er vaak ook bagger uit in IE als je hebt zitten spelen met transparency (bijv. met jQuery's fadeTo). Doe je daar toevallig wat mee?

[ Voor 8% gewijzigd door 10goto10 op 31-03-2011 09:40 ]

[NeilForeal]

@RobIII. Ik vind het niet zo netjes om aan te nemen dat ik er geen tijd in stop, ik ben er al 2 weken mee bezig en mijn uurtarief voor deze klus inmiddels ongeveer 5 cent. Ik heb zo ontzettend veel geprobeerd en zoveel mensen gevraagd voordat ik hier een topic maakte.

Het moet inderdaad wat te maken hebben met transparancy of een of andere parameter waar IE op bugged.

De testcase had geen onduidelijk lettertype, dus het zit hem echt in de layout. Het enige gekke wat in de layout zit is een CSS shadow, die Booster ook terecht uitlicht. Daar ga ik even mee spelen en kijken wat er gebeurt. Het lijkt erop of IE dat verkeerd uitleest en ook de fonts gaat renderen.

Wat is IE eigenlijk toch een vervelend browser

Om wat andere vragen te beantwoorden, ik gebruik gewoon Arial 12 px, geen andere gekke dingen of spacing oid. Anders zou het er op de andere browsers ook niet uitzien hè

[geert1]

Lees het bericht van Booster hierboven nog eens, hij zit al ongeveer bij de oorzaak van het probleem denk ik: Je gebruikt css filters. Over het algemeen is dat niet aan te raden. Haal dat er eens uit en probeer het opnieuw.