Webfont + цвет при наведении: часть текста не меняет цвет
Я видел это несколько раз, только на Webkit. Сценарий таков, что у вас есть какой-то текст с парящим цветом, и онс использованием пользовательского шрифта webfont. При наведении курсора часть самой правой буквы не приобретает цвет при наведении. Чтобы понять, что я имею в виду, просмотрите эту скрипку в Chrome или Safari и внимательно посмотрите на «r». в конце текста при наведении курсора он не полностью красный.
http://jsfiddle.net/jaredh159/xPZB8/
HTML из скрипки:
<a>Some Text Foo Bar</a>
CSS из скрипки:
@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;
}
Что это? Поправимо? Это просто случай плохо созданного файла веб-шрифта или плохого шрифта? Кто-нибудь знаком с этой проблемой или есть обходной путь?