Скачать faux pas - faux pas -исходный код скачать

faux pas

Загрузка шрифта

1.0.0

Скачать

️ Этот проект архивируется, а репозиторий больше не поддерживается.

Faux PAS, детектор Faux Web Font

Сценарий для выделения элементов, которые неправильно не соответствуют блокам @Font-Face, что может привести к дрянному искусственному жирному саду или искусственному курсивому рендеринге. Работы автономные - без зависимостей.

Хотите это в командной строке? Проверьте node-faux-pas .

Демо

Также доступна более полная тестовая страница.

Что это?

Когда вы включите блок CSS @font-face на свою страницу, вы указываете font-family , font-weight и font-style в этом блоке. Когда вы используете веб -шрифт, вы указываете те же свойства на элементах на вашей странице. Хотя вам нужно точно соответствовать значению font-family , чтобы использовать веб-шрифт, font-weight и font-style не требует точного сопоставления. Это может привести к неожиданному поведению, поскольку браузер использует то, что доступно, даже если это не очень хорошо.

Кроме того, если ваш элемент хочет font-weight был меньше или равным 500 , но ваш блок @font-face имеет только варианты вашего шрифта, которые смелые, браузер попытается синтезировать смелый веб-шрифт для вас. Этот синтезированный рендеринг часто является подразделением. Тот же синтез происходит, когда вы хотите курсивно, но нет курсивного веб -шрифта. Такое поведение можно контролировать со свойством font-synthesis если его поддерживают браузеры.

faux-pas помогает вам в журнале и сообщая об этих несоответствиях и искусственных визуализациях, чтобы вы могли исправить код оскорбления.

Стандартный рендеринг Open Sans

Стандартный Open Sans

Faux Bold Open Sans

Faux Italic Open Sans

Установка

Доступно на NPM в виде fg-faux-pas :

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

Использование

Bookmarklet: Получите закладку на демо -странице. Перетащите его в свои закладка и используйте, где это необходимо. По умолчанию он выделяет элементы на вашей странице, но проверьте консоль для получения дополнительной информации.
Рекомендуется: включите в сборку библиотеки вашей картины. Включите как faux-pas.js , так и faux-pas.init.js (TIP: Используйте свой собственный файл инициирования, чтобы изменить параметры конфигурации).
Также в командной строке: node-faux-pas

Параметры

console: true : использует console для вывода полной информации о ведении журнала (предупреждения о несоответствующих элементах и ошибках для искусственного рендеринга).
highlights: true : добавляет конкретный стиль в несоответствующие/искусственные элементы на странице для визуального осмотра.
mismatches: true : несоответствие может не быть искусственным рендерингом, даже если это неправильная конфигурация - этот вариант позволяет вам отключить эти предупреждения.