Webfont + hover color: parte del texto que no cambia de color
He visto esto unas cuantas veces, solo en Webkit. El escenario es que tiene texto con un color de desplazamiento, y está usando una fuente personalizada de webfont. Cuando se desplaza, parte de la letra derecha más alejada no es obtener el color de desplazamiento. Para ver a qué me refiero, vea este violín en Chrome o Safari, y observe con cuidado la "r" al final del texto mientras se desplaza con el mouse, no está completamente roja.
http://jsfiddle.net/jaredh159/xPZB8/
HTML desde el violín:
<a>Some Text Foo Bar</a>
CSS del violín:
@font-face {
font-family: 'stephanie_marie_jfregular';
src: url('stephanie-marie-jf-webfont.eot');
src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
url('stephanie-marie-jf-webfont.woff') format('woff'),
url('stephanie-marie-jf-webfont.ttf') format('truetype'),
url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
font-family: stephanie_marie_jfregular;
color: #000;
font-size:50px;
}
a:hover {
color: #ff0000;
}
¿Que es esto? ¿Fijable? ¿Es solo el caso de un archivo de fuente web mal creado o una fuente incorrecta? ¿Alguien familiarizado con este problema o tiene una solución?