Tähevahed - CSS-trikid

Anonim

letter-spacingVara kontrollib palju ruumi vahel iga kirja või elemendi tekstilõik. Väärtused, mida toetab, letter-spacinghõlmavad fondi suhtelisi väärtusi (em, rem), vanemate suhtelisi väärtusi (protsent), absoluutväärtusi (px) ja normalatribuuti, mis lähtestatakse fondi vaikeväärtustele.

Soovitatav on kasutada fondi suhtelisi väärtusi, nii et letter-spacingfondi suuruse muutmisel kas kujunduse või kasutaja käitumise järgi suureneb või väheneb sobivalt.

p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )

Kasutamisel on kõige olulisem märkida, letter-spacinget määratud väärtus ei muuda vaikeväärtust, see lisatakse brauseri rakendatavale vaikevahele (fondi mõõdikute põhjal). letter-spacingtoetab ka negatiivseid väärtusi, mis karmistavad teksti välimust, selle asemel, et seda lõdvendada.

Vaadake seda pliiatsit!

Huvipunktid

  • Alampikslite väärtused: enamikus brauserites määratakse väärtus, mis arvutatakse väiksema väärtuseni, kui 1pxseda ei letter-spacingrakendata. Praegu toetavad Firefox 14+ ja IE 10 alampikslite paigutust; Opera ja WebKit mitte. Plaaster on maandunud, nii et WebKit toetab nüüd alampikslite tähevahet.
  • letter-spacingMajutusasutuse animatable CSS üleminekud.
  • Üks viis inline-ploki elementide vahelise ruumi vastu võitlemiseks on letter-spacing: -4px;inline-block-elementide vanemkonteinerisse seadmine . Seejärel peate lähtestama letter-spacing: normal;lapse elemendid.
  • Harva, kui kunagi on hea mõte kirjutada tühikutähed.

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Töötab Töötab Töötab Enamik Töötab Töötab Töötab

Märkus mobiilibrauseri toe kohta: mõned Opera Mobile versioonid, mittestandardsed WebKiti juurutused ja brauser NetFront ei toeta letter-spacing. Spetsiifikat on üksikasjalikult kirjeldatud ülaltoodud lingil QuirksMode.