Webfont +悬停颜色：不改变颜色的部分文字 [英] Webfont + hover color: part of text not changing color

问题描述

我已经看过几次，只有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'）格式（'embedded-opentype'），
 url（'stephanie-marie-jf-webfont.woff'）格式（'woff'），
 url（'stephanie-marie-jf-webfont.ttf'）格式（'truetype'），
网址（'stephanie-marie-jf-webfont.svg＃stephanie_marie_jfregular '）格式（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
 
 a {
 font-family：stephanie_marie_jfregular; 
颜色：＃000; 
 font-size：50px; 
} 
 
 a：hover {
 color：＃ff0000; 
} 
  

这是什么？可以解决的？这只是一个糟糕的网页字体文件，或者一个糟糕的字体？任何一个熟悉这个问题或有解决方法？

解决方案

正确的几个像素没有给出他们的：hover color是因为它们在 a 容器之外运行。检查它或给它一个背景颜色，你可以看到这个。解决方法是通过给 a 一些额外的填充权来伪造额外的空间。

我不确定字形能够在容器外面运行，所以如果其他人知道，我会感兴趣。现在，我分享了celeriko怀疑这个字体的指标是borked。

编辑：原来是字体的 side bearing ，允许字形在边框外运行。这与笔刷字体字体很常见，并允许各个字母通过稍微重叠的海誓山盟进行连接。所以这是一个有效的字体属性，不幸的是造成了一个问题，原来的印刷工不需要考虑 - 纸上没有悬停状态;）

I've seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it's using a webfont custom font. When you hover, part of the furthest right letter is not getting the hover color. To see what I mean, view this fiddle in Chrome or Safari, and look carefully at the "r" at the end of the text while hovering with your mouse, it is not completely red.

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

HTML from fiddle:

<a>Some Text Foo Bar</a>

CSS from fiddle:

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

What is this? Fixable? Is it just the case of a poorly created web-font file, or a bad font? Any one familiar with this issue or have a workaround?

解决方案

The reason the right few pixels arent't given their :hover color is because they run outside the a container. Inspect it or give it a background color and you can see this. A workaround is faking the extra space by giving the a some extra padding-right.

I'm not sure how exactly the glyph is able to run outside the container, so I'm be interested if anyone else knows. For now I'm sharing celeriko's suspicion that this font's metrics are borked.

EDIT: Turns out it's the font's side bearings that allow for the glyph to run outside its bounding box. This is common with brush script fonts and allows individual letters to connect by slightly overlapping eachother. So it's a valid property of the font, unfortunately causing a problem the original typographers didn't have to account for — no hover states on paper ;)

这篇关于Webfont +悬停颜色：不改变颜色的部分文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！