Webfonts hoveren niet correct in Safari [Mac/Win]

[MoietyMe]

Op het moment ben ik bezig met een website waar ik gebruik maak van Webfonts. Op het moment wordt dit ondersteund door Safari, IE en eind deze maand ook door FireFox.

Alleen heb ik een probleem in Safari. Ik heb een menu wat uit grote koppen tekst bestaat, deze zijn allemaal uppercase. Nou is het probleem al volgt: als je over een menu-item hovert, dan laat hij het bovenste stukje van de tekst in de oude kleur zien.



Online Voorbeeld

Een line-height hielp bij mij niet. Iemand enig idee wat ik nog meer kan proberen?

— Edit
Na wat verder onderzoek blijkt dat het aan de font-rendering van Apple ligt, want als ik mijn Safari op Windows instel om de Windows-rendering te gebruiken is het daar opgelost.

[ Voor 13% gewijzigd door MoietyMe op 11-06-2009 10:03 ]

[Bosmonster]

Mjah, de font-rendering van Apple is sowieso gaar als je het mij vraagt. Soms herken je fonts zelfs helemaal niet meer terug zo blurry worden ze gemaakt. Heb soms het idee dat een hele site in comic sans is gebouwd, terwijl het gewoon Arial is ofzo.

Daarnaast worden kleinere lettergroottes een stuk groter/breder met deze rendering, wat ook bij horizontale menu's nog wel een problemen op wil leveren.

Hoop dat ze dat eens fatsoenlijk op gaan lossen...

[ Voor 29% gewijzigd door Bosmonster op 11-06-2009 11:03 ]

[MoietyMe]

@Bosmonster: dat mag je vinden, ik ben van mening dat de render methode van Apple een stuk fijner is om te lezen en ook veel rustiger overkomt, maar het maakt niet uit wat wij vinden. Het gaat er om dat er een fout zit in mijn website.

— Edit
Inmiddels een work-around bedacht welke werkt op de Mac, maar ben er toch niet helemaal tevreden mee. De code die werkt op de Mac:

HTML:

<ul id="main-menu">
    <li>
        <a href="#"><span>Converse</span><span class="none">Converse</span></a>
    </li>
</ul>

Cascading Stylesheet:

.none {
    display:none;
}

#main-menu li a:hover span:nth-child(1) {
    display:none;
}

#main-menu li a:hover span:nth-child(2) {
    display:inline;
    color:#000;
}

Dit werkt wel, maar is natuurlijk niet de netste manier om dit op te lossen. Iemand anders nog ideeën?

[ Voor 55% gewijzigd door MoietyMe op 11-06-2009 11:33 ]