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文件（自動使用最新代碼更新書籤）。