Webfont +懸停顏色：不改變顏色的文本的一部分

我已經看過幾次，只有Webkit。該方案是，您有一些懸停顏色的文本，它使用的是webfont自定義字體。當你懸停時，最右邊的部分信件沒有得到懸停的顏色。要了解我的意思，請在Chrome或Safari中查看此提琴，並在鼠標懸停的同時仔細查看文本末尾的「r」，但不是完全紅色。從小提琴Webfont +懸停顏色：不改變顏色的文本的一部分

http://jsfiddle.net/jaredh159/xPZB8/

HTML：

@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; 
}

是什麼：從小提琴

<a>Some Text Foo Bar</a>

CSS？可以解決的？這只是一個糟糕的網頁字體文件，或者一個糟糕的字體？任何一個熟悉這個問題或有解決方法？

來源

2013-12-12 Jared Henderson

以前從未見過，但知道一些關於字體/圖形的信息一個糟糕的網頁字體...... – celeriko

@celeriko是的，這也是我的直覺，但它似乎可以在不徘徊的情況下呈現字形，爲什麼它會在懸停時失敗？ –

正確的幾個像素沒有給出它們的:hover顏色的原因是因爲它們在a容器之外運行。檢查它或give it a background color，你可以看到這一點。解決方法是通過給予a一些額外的padding-right來僞造額外的空間。

我不確定字形能夠在容器外面運行，所以如果其他人知道，我會感興趣。現在我分享了celeriko懷疑這個字體的指標是borked。

編輯：原來是字體的side bearings，允許字形運行在其邊界框之外。這與筆刷字體字體很常見，並允許各個字母通過稍微重疊的海誓山盟進行連接。所以這是一個有效的字體屬性，不幸的是原始的印刷工不需要考慮問題 - 紙上沒有懸停狀態;）

來源

2013-12-13 09:29:25 RoelN

+1精確觀察和解決方法！ – celeriko

謝謝，這很有幫助。對我的應用來說不是一個很好的解決方案，但至少它是一些東西。 –

乾杯，在我的情況下做錨'顯示：塊;'做了伎倆。 – diggersworld

Webfont +懸停顏色：不改變顏色的文本的一部分

回答

相關問題