html - 网页中不需要的填充字母

Question

我正在使用来自 Fontsquirrel, Munro 的这款很棒的字体。 (http://www.fontsquirrel.com/fonts/munro)我想在我的网页中使用这种字体。我已将 .ttf 文件放在名为“字体”的映射中，并在 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 的网页中没有这样做。我也尝试修改 Glyphs 中的字体，但似乎没有任何问题。

我的问题:如何撤消此字体中填充的字母？这是一个问题，因为它不是来自 Typekit 或 Google 字体的网络字体吗？

非常感谢您提供的所有帮助。

Answer 1

我无法在本地安装了 Munro 的 Windows 7(Chrome、Firefox、IE)上重现此内容。字母显示得很好(见下图)。我认为这是一个更大的问题:不是为网络制作的字体在浏览器和平台之间的呈现可能非常不同(如果有的话)。如果您想确保这些按钮对所有用户看起来都一样，请坚持使用您使用 Photoshop 创建的图像(并且可能将它们保存为具有透明度的 PNG-8 而不是 PNG-24 以减少几千字节)。

从技术上讲，您可以将任何 TTF 文件转换为网络字体，例如使用 FontSquirrel 的 Webfont Generator。当然，字体的许可证必须允许这样做，因为您实际上是在重新分发字体。只是将 TTF 文件放在 /fonts/ 文件夹中并使用 font-family: Munro;，然而，不会削减它，只对你有用，因为你之前已经在您的计算机上安装了该字体。

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

所以是的，这可能是个问题，因为这种特定字体对网络不是很友好，但即使使用网络友好字体，如通过 TypeKit 或 Google Fonts 提供的字体，您仍然会遇到渲染差异(最明显的是Windows 和 Mac)。虽然尝试仅使用 CSS 重新创建图像可能是一项有趣的练习，但您最好将这些按钮保存为图像，或使用网络友好的字体。也许是来自 Google 字体中等宽字体类别的东西？

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