字体无法正确渲染/显示？答案

【问题标题】：Font not rendering/displaying correctly?字体无法正确渲染/显示？
【发布时间】：2015-10-06 03:50:57
【问题描述】：

我向社区询问是否有人在他们的网站上嵌入字体时遇到过任何问题并且结果变得很糟糕？所有未绑定到特定浏览器的最新浏览器都是这种情况...

尝试添加某些 css 规则来更改字体粗细、样式、平滑度等，但似乎不会以任何方式影响字体，有什么想法吗？

您会注意到字母“A”不是应有的，但正确的字体类型加载没有问题。

字体可以找到here

截图

嵌入式字体 CSS

@font-face {
    font-family: 'Linotte Semi Bold';
    src: url('/fonts/linotte-semi-bold.eot');
    src: url('/fonts/linotte-semi-bold.eot?#iefix') format('embedded-opentype'), 
         url('/fonts/linotte-semi-bold.woff2') format('woff2'), 
         url('/fonts/linotte-semi-bold.woff') format('woff'), 
         url('/fonts/linotte-semi-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

【问题讨论】：

您能否创建一个包含所有相关代码的 codepen/jsfiddle/anything 来重现该错误？

标签： css fonts font-face webfonts

【解决方案1】：

试试这个，它修复了我过去的一些字体外观，但它有点像在黑暗中拍摄。那个“A”真的很奇怪，如果你在系统上安装字体并在photoshop或word或其他任何东西中使用它，它看起来是否一样？

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

【讨论】：

感谢您的建议，最初以及之前在处理字体时尝试过此操作，通常会修复任何小的渲染问题，但在这种情况下，“A”仍处于相同状态。我可以确认字体在安装后在 Photoshop 和 Word 上都可以正常工作。

【解决方案2】：

正如我们所说，我刚刚收到来自 MyFonts 的确认，有时字体配置会根据所使用的字体略有不同，并且在下载 webfont 工具包时可能需要对提示设置进行一些调整。

以下步骤解决了有关字母“A”的问题，现在可以按预期正确显示：

您可能想尝试下载配置为使用不同提示设置的 webfont 工具包。

只需登录您的 MyFonts 订单历史记录：https://www.myfonts.com/my/orders/kitbuild.html

选择您要使用的网络字体。

在“提示”子标题下，选择“平滑”、“本机”或“无”（“最佳”是默认设置）。可能需要多次尝试，具体取决于字体及其使用方式。

默认情况下，自定义 Webfont Kit Builder 将选择 CSS 脚本。如果您更喜欢使用 JS，只需在页面底部更改此选项即可。

下载新工具包并替换服务器中现有的 webfonts/样式表。

【讨论】：