faux pas

配x该项目已存档，存储库不再维护。

人造PAS，人造网络字体检测器

一个脚本以突出显示不匹配到 @font-face块不匹配的元素，这可能会导致伪造的人造大胆或人造斜体斜体渲染。独立工作 - 无依赖性。

想要在命令行上吗？查看node-faux-pas 。

演示

还提供了更全面的测试页面。

这是什么？

当您在页面上包含css @font-face块时，您可以在该块内指定font-family ， font-weight和font-style 。使用Web字体时，您可以在页面上的元素上指定相同的属性。虽然您需要匹配font-family的价值以确切使用Web字体， font-weight和font-style不需要确切的匹配。这可能会导致出乎意料的行为，因为浏览器使用可用的东西，即使它不是一个很好的匹配。

此外，如果您的元素想要的font-weight小于或等于500 ，但是您的@font-face块只有大胆的字体的变体，则浏览器将尝试为您合成大胆的Web字体。这种合成的渲染通常是低于标准的。当您想要斜体时，也会发生相同的合成，但是没有斜体Web字体可用。如果浏览器支持它，则可以用font-synthesis属性来控制此行为。

faux-pas通过记录和报告这些不匹配和人造渲染来为您提供帮助，以便您可以修复有问题的代码。

开放sans的标准渲染

人造大胆开放sans

人造斜体开放式sans

安装

在NPM上以fg-faux-pas提供可用：

 npm install --save-dev fg-faux-pas

用法

• 书签：在演示页面上获取书签。将其拖到您的书签上，并在需要时使用。默认情况下，它突出显示页面上的元素，但请检查控制台以获取更多输出。
• 建议：在您的模式库中包含。同时包括faux-pas.js和faux-pas.init.js （提示：使用自己的初始文件更改配置选项）。
• 另外在命令行： node-faux-pas

选项

• console: true ：使用console输出完整的日志记录信息（对不匹配的元素的警告和人造渲染错误的错误）。
• highlights: true ：在页面上为不匹配/人造元素添加了特定样式以进行视觉检查。
• mismatches: true ：不匹配可能不是一个人造渲染，即使这是一个错误的配置 - 此选项使您可以禁用这些警告。

浏览器支持

任何支持CSS字体加载API的东西：

• Google Chrome 35+
• 歌剧22+
• Firefox 41+
• Safari 10+
• 移动野生动物园10+
• Android Chromium Webview
• Chrome for Android
• 还有其他

建造

使用gulp生成一个新的文档HTML文件（自动使用最新代码更新书签）。