网页中不需要的填写字母

时间:2014-12-30 23:10:29

标签: html css fonts photoshop letter

我正在使用Fontsquirrel,Munro这个很棒的字体。 (http://www.fontsquirrel.com/fonts/munro) 我想在我的网页中使用这个字体。我把.ttf文件放在一个名为'fonts'的地图中,并在CSS中引用它。

nav a{
    background:#9cf2e6;
    display:inline-block;
    color:#0;
    text-decoration:none;
    font-size:15px;
    font-family:'Munro';
    margin:13px 3%;
    padding:7px 2%;
}

然后我发现了一些东西。我的网页中的O已经填满。正如你所看到的,它不应该这样做,因为它在Photoshop或Fontsquirrel的网页中没有这样做。我也尝试修改字形中的字体,但似乎没有任何问题。

http://i.stack.imgur.com/STU5r.jpg

我的问题:如何撤消此字体中填写的字母?这是一个问题,因为它不是来自Typekit或Google字体的webfont吗?

非常感谢你能得到的所有帮助。

1 个答案:

答案 0 :(得分:2)

我无法在本地安装Munro的Windows 7(Chrome,Firefox,IE)上重现这一点。字母显示得很好(见下图)。而且我认为这是一个更大的问题:不是为网络制作的字体在浏览器和平台上的呈现方式可能会有很大不同(如果有的话)。如果你想确保所有用户的这些按钮看起来一样,请坚持使用Photoshop创建的图像(并且可能将它们保存为PNG-8,而不是使用PNG-24,而不是使用PNG-24来削减一些千字节)。

从技术上讲,您可以使用FontSquirrel的Webfont Generator将任何TTF文件转换为Web字体。当然,字体的许可证必须允许这样做,因为你基本上是在重新分配字体。只是将TTF文件放在/fonts/文件夹中并使用font-family: Munro;,但是,它不会削减它,只适用于您,因为您之前已在计算机上安装了该字体。

如果我在计算机上安装了Ubuntu字体,并且我访问了一个在其样式表中引用它的网页,我的浏览器就不会费心从网络服务器上下载,而是从我的硬盘驱动器(或内存)中加载它),可以节省带宽并且速度更快。我还发现在本地安装一个字体实际上可以使它的渲染方式不同于它作为Web字体加载时(例如WOFF)。

所以是的,它可能是一个问题,因为这个特定的字体不是非常适合网络,但即使使用网络友好的字体,比如通过TypeKit或Google字体提供的字体,你仍然会遇到渲染差异(最明显的是Windows和Mac)。虽然尝试使用CSS重新创建图像可能是一项有趣的练习,但最好将这些按钮保存为图像,或者使用适合网络的字体。可能是Google字体中Monospace类别的东西吗?

http://i.stack.imgur.com/9SuMr.png(Windows 7,Chrome)