Unduh faux pas - Unduh Kode Sumber faux pas

faux pas

Pengunduhan font

1.0.0

Unduh

️ Proyek ini diarsipkan dan repositori tidak lagi dipertahankan.

Faux Pas, detektor font web palsu

Sebuah skrip untuk menyoroti elemen-elemen yang tidak cocok dengan blok @font-wajah, yang dapat mengakibatkan rendering tebal palsu atau faux italic. Bekerja mandiri - tidak ada dependensi.

Ingin ini di baris perintah? Lihat node-faux-pas .

Demo

Halaman uji yang lebih komprehensif juga tersedia.

Apa ini?

Ketika Anda menyertakan blok CSS @font-face di halaman Anda, Anda menentukan font-family , font-weight , dan font-style di dalam blok itu. Saat Anda menggunakan font web, Anda menentukan properti yang sama pada elemen pada halaman Anda. Meskipun Anda perlu mencocokkan nilai font-family tepat untuk menggunakan font web, font-weight dan font-style tidak memerlukan pencocokan yang tepat. Ini dapat menyebabkan perilaku yang tidak terduga karena browser menggunakan apa yang tersedia, bahkan jika itu tidak cocok.

Lebih lanjut, jika elemen Anda menginginkan font-weight kurang dari atau sama dengan 500 tetapi blok @font-face Anda hanya memiliki varian jenis huruf Anda yang berani, browser akan mencoba untuk mensintesis font web yang berani untuk Anda. Rendering yang disintesis ini seringkali sub-par. Sintesis yang sama terjadi ketika Anda menginginkan miring, tetapi tidak ada font web miring tersedia. Perilaku ini dapat dikendalikan dengan properti font-synthesis jika browser mendukungnya.

faux-pas membantu Anda dengan mencatat dan melaporkan ketidakcocokan dan rendering palsu ini sehingga Anda dapat memperbaiki kode yang menyinggung.

Render standar sans terbuka

Sans Terbuka Standar

Sans terbuka tebal

Sans terbuka miring palsu

Instalasi

Tersedia di NPM sebagai fg-faux-pas :

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

Penggunaan

Bookmarklet: Dapatkan bookmarklet di halaman demo. Seret ke bookmarklet Anda dan gunakan di mana diperlukan. Secara default menyoroti elemen pada halaman Anda tetapi periksa konsol untuk lebih banyak output.
Direkomendasikan: Sertakan dalam pembuatan perpustakaan pola Anda. Sertakan baik faux-pas.js dan faux-pas.init.js (Tip: Gunakan file init Anda sendiri untuk mengubah opsi konfigurasi).
Juga pada baris perintah: node-faux-pas

Opsi

console: true : Menggunakan console untuk mengeluarkan informasi logging penuh (peringatan untuk elemen dan kesalahan yang tidak cocok untuk rendering palsu).
highlights: true : Menambahkan gaya spesifik ke elemen yang tidak cocok/palsu pada halaman untuk inspeksi visual.
mismatches: true : Ketidakcocokan mungkin bukan rendering palsu meskipun itu adalah salah konfigurasi - opsi ini memungkinkan Anda untuk menonaktifkan peringatan ini.