Download faux pas - faux pas Código Fonte Download

faux pas

Baixar fonte

1.0.0

Baixar

️ Este projeto está arquivado e o repositório não é mais mantido.

Faux Pas, um detector de fontes da Web Faux

Um script para destacar os elementos que são incompatíveis incorretamente para os blocos @font-face, o que pode resultar em uma renderização em ital ou inquilino de má qualidade. Funciona independente - nenhuma dependência.

Quer isso na linha de comando? Confira node-faux-pas .

Demonstração

Uma página de teste mais abrangente também está disponível.

O que é isso?

Quando você inclui um bloco CSS @font-face na sua página, você especifica um estilo de font-family , font-weight e font-style dentro desse bloco. Quando você usa uma fonte da web, você especifica essas mesmas propriedades nos elementos da sua página. Embora você precise corresponder ao valor da font-family exatamente para usar a fonte da web, font-weight e font-style não exigem correspondência exata. Isso pode levar a um comportamento inesperado, pois o navegador usa o que está disponível, mesmo que não seja uma boa correspondência.

Além disso, se o seu elemento quiser um font-weight menor ou igual a 500 , mas seu bloco @font-face possui apenas variantes do seu tipo de letra em negrito, o navegador tentará sintetizar uma fonte ousada para você. Essa renderização sintetizada é frequentemente sub-par. A mesma síntese acontece quando você deseja itálico, mas nenhuma fonte da Web em itálico está disponível. Esse comportamento pode ser controlado com a propriedade font-synthesis se os navegadores a apoiarem.

faux-pas ajuda você registrando e relatando essas incompatibilidades e renderizações falsas para que você possa corrigir o código ofensivo.

Renderização padrão de sans aberto

Standard Open Sans

Faux Bold Open Sans

Faux Italic Open Sans

Instalação

Disponível no NPM como fg-faux-pas :

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

Uso

Bookmarklet: Obtenha o Bookmarklet na página de demonstração. Arraste -o para seus marcadores e use quando necessário. Por padrão, ele destaca os elementos da sua página, mas verifique o console para obter mais saída.
Recomendado: Inclua na sua construção da biblioteca de padrões. Inclua faux-pas.js e faux-pas.init.js (Dica: use seu próprio arquivo init para alterar as opções de configuração).
Também na linha de comando: node-faux-pas

Opções

console: true : usa console para produzir informações completas de registro (avisos para elementos e erros incompatíveis para renderização falsa).
highlights: true : adiciona um estilo específico aos elementos incompatíveis/falsos na página para inspeção visual.
mismatches: true : Uma incompatibilidade pode não ser uma renderização falsa, mesmo que seja uma configuração incorreta - essa opção permite desativar esses avisos.