faux pas faux pas 소스 코드 다운로드 다운로드

faux pas

글꼴 다운로드

1.0.0

다운로드

켈 이 프로젝트는 보관되어 있으며 저장소는 더 이상 유지 관리되지 않습니다.

가짜 웹 글꼴 탐지기 인 가짜 PA

불일치 한 요소를 @font-face 블록으로 잘못 강조하는 스크립트로 인해 대담하거나 가짜 이탈리아 렌더링을 초래할 수 있습니다. 독립형 작업 - 종속성이 없습니다.

명령 줄에서 이것을 원하십니까? node-faux-pas 확인하십시오.

데모

보다 포괄적 인 테스트 페이지도 제공됩니다.

이게 뭔가요?

페이지에 CSS @font-face 블록을 포함시킬 경우 해당 블록 내부에 font-family , font-weight 및 font-style 지정합니다. 웹 글꼴을 사용하면 페이지의 요소에 동일한 속성을 지정합니다. 웹 글꼴을 사용하려면 font-family 의 값과 정확히 일치해야하지만 font-weight 및 font-style 정확히 일치 할 필요가 없습니다. 브라우저가 잘 일치하지 않더라도 사용 가능한 것을 사용하므로 예기치 않은 동작으로 이어질 수 있습니다.

또한 요소가 500 보다 작거나 같은 font-weight 원하지만 @font-face 블록에 굵은 서체의 변형 만 가지고 있으면 브라우저는 대담한 웹 글꼴을 합성하려고 시도합니다. 이 합성 된 렌더링은 종종 하위 파입니다. 이탤릭체를 원할 때 동일한 합성이 발생하지만 이탤릭체 웹 글꼴을 사용할 수 없습니다. 이 동작은 브라우저가 지원하는 경우 font-synthesis 속성으로 제어 할 수 있습니다.

faux-pas 이러한 불일치 및 가짜 렌더링을 기록하고보고하여 문제가되는 코드를 수정할 수 있도록 도와줍니다.

열린 산의 표준 렌더링

표준 오픈 산스

가짜 대담한 열린 산

가짜 이탈리아 오픈 산

설치

NPM에서 fg-faux-pas 로 제공 :

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

용법

북마크 : 데모 페이지에서 북마크를 가져옵니다. 책갈피로 드래그하고 필요한 경우 사용하십시오. 기본적으로 페이지의 요소를 강조 표시하지만 콘솔에서 더 많은 출력을 확인하십시오.
권장 : 패턴 라이브러리 빌드에 포함하십시오. faux-pas.js 및 faux-pas.init.js 모두 포함하십시오 (팁 : 자신의 init 파일을 사용하여 구성 옵션을 변경하십시오).
또한 명령 행 : node-faux-pas

옵션

console: true : console 사용하여 전체 로깅 정보를 출력합니다 (불일치 요소에 대한 경고 및 가짜 렌더링에 대한 오류).
highlights: true : 시각적 검사를 위해 페이지의 불일치/가짜 요소에 특정 스타일을 추가합니다.
mismatches: true : 불일치가 잘못 구성되어 있어도 가짜 렌더링이 아닐 수 있습니다.이 옵션을 사용하면 이러한 경고를 비활성화 할 수 있습니다.