15 Hasznos webes tipográfiai eszközök, könyvtárak és keretek

A webes tipográfia kezelése valódi mókás volt. Minden böngészőnek saját algoritmusa van a betűtípusok megjelenítésére amelyek váratlan eltéréseket okozhatnak. Csak néhány CSS tulajdonság van, amellyel bizonyos betűkészleteket vezérelhet, mint például a betűkészletek, a betűtípusok simítása, a DropCaps létrehozása stb. Ezen felül a betűtípusokkal kapcsolatban sok elrendezési problémával kell foglalkoznunk.

A jó hír az, hogy vannak olyan erőforrások, amelyek segítségével a kerékpárt átveheti a webhely tipográfiájával kapcsolatban. Itt vannak 15 webes eszközök, könyvtárak és keretek erre a célra használható.

További információ a Hongkiatról:

9 WordPress bővítmények többet a betűkészletekkel
20 A legjobb WordPress tipográfiai bővítmények az olvashatóság javítása érdekében
Jobb és élesebb felhasználói felület ikonok a webes betűtípusokkal

TypeRendering

Dióhéjban, TypeRendering hasonló a Modernizr-hez, kivéve, hogy csak a betűtípus megjelenítésére szolgáló böngészőmotort azonosítja. Ez a könyvtár hozzáteszi, hogy egyéni osztályokat hozzon létre a felfedezések alapján, amelyek segítségével a típus megjelenítéshez speciális stílusszabályokat alkalmazhat.

KerningJS

A Kerning még nem testreszabható a weben való használatra - font-kerning a támogatás még mindig szegény, de egy új, szabványos ingatlan jön el. KerningJS Javascript-könyvtár, amely néhány új tulajdonságot nyújt a jobb kerning vezérléshez -betű-Kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Ne feledje, hogy a fenti példa nem szabványos és csak a KerningJS esetében alkalmazható.

DropcapJS

Bár a dropcap létrehozása a jelenlegi CSS szabványokkal megvalósítható, az eredmény még nem tökéletes. Néha egyenesen nem kívánatos. Az Adobe Web Platform által kifejlesztett DropcapJS feladata, hogy lehetővé tegye a webdesigner számára, hogy könnyen alkalmazhasson tökéletes dropcapot.

LiningJS

LiningJS egy JavaScript könyvtár, amely hozzáadja a vonal osztályt a bekezdés minden sorában. Ez lehetővé teszi, hogy a vonalat külön-külön stílusosítsa. Ez szimulálja az ötletet :: nth-line (), :: n-ed last-vonal () és :: Utolsó-line pszeudo-osztályok, amelyek még nincsenek jelen a CSS-ben. Íme egy példa arra, hogy hogyan formázzuk a bekezdés első sorát a LiningJS-el:

 p .line [first] font-weight: 600; szöveg-átalakítás: nagybetűs;

Emellett a LiningJS támogatja a kínai bekezdésáramlást is.

UnderlineJS

UnderlineJS egy JavaScript könyvtár, amely jobbá teszi a szöveget. Nézd meg a demót, hogy lássátok, mit gondolok, győződjön meg róla, hogy a vonalak fölé lebeg. Hasonlítsa össze a demót az aktuális CSS aláhúzott kimenetével text-dekoráció standard és valószínűleg az underlineJS rajongója is.

FlowType

Ez a bővítmény dinamikusan módosítja a betűméretet egy adott burkolószélesség alapján. FlowType segíti Önt abban, hogy egy soronként ideális számú karaktert alkalmazzon bármilyen képernyő szélességben. A könyvtárban olyan opciók találhatók, ahol a min / max képernyő szélességét, a min / max betűméretet és a betűtípus arányt lehet beállítani.

HatchShow

HatchShow kibővíti a betűtípus méretét a tartály teljes szélességének kitöltéséhez. A plugin az algoritmussal ki van kapcsolva; dióhéjban mérheti a tartály szélességét és a betűtípus karakterét, és hozzáadja a betűtípus megfelelő méretét.

GridLover

GridLover Ez egy nagyszerű eszköz a tipográfiai elrendezés alapvető stílusainak létrehozásához (méret, vonalmagasság és margó) egy egyszerű csúszka UI segítségével. Az SCSS, a LESS és a Stylus stílusokat generálja, így a projektet azonnal felhasználhatja a projektben, függetlenül attól, hogy melyik CSS-Preprocessor használja.

TypeScale

TypeScale egy online eszköz, amely segít a webhely megfelelő betűméretének meghatározásában. Az eszköz egy egyszerű, intuitív GUI-t tartalmaz a használni kívánt alap betűméret, méretarány és betűcsalád beillesztéséhez. Az eredményeket megjelenítjük Önnek, így játszhatsz a skála körül, hogy csak a megfelelő értéket kapd. Csak készítsd el a CSS-t.

Moduláris skála

Moduláris skála egy eszköz az ideális betűméretezés létrehozásához a test és a fejléc szövegéhez. Ez Sass-ban jelenik meg, amelyet a Sass könyvtárral együtt kell használni. Alternatívaként JavaScript is használható .

Font-szélesség

Betűtípus-szélesség (FTW) Javascript könyvtár, amely betűtípust tesz lehetővé annak szélességtartályához. Meg fogja határozni a betűméretet a betűtípushoz szükséges szóközzel együtt. Ha szép címet szeretne tenni, akkor ez a könyvtár, amit megpróbálhat.

FFFFallback

FFFFallback, egy praktikus eszköz, amely lehetővé teszi, hogy megtalálja a legjobb betűkészletet, amely kíméletesen lebomlik. Az eszköz egy könyvjelző formájában jelenik meg, amely elemzi a betűtípuscsaládot az oldalon, és javasolja, hogy egy sor betűtípust használjanak vissza.

Betűtípus pár

A Google Betűtípus az egyik legnépszerűbb webes betűkészletkönyvtár, amelyet több millió használ, és 500 betűcsaládot használ. Betűtípus pár párosított Google-betűtípusok gyűjteménye, ahol különböző kombinációt találhat a betűtípuscsaládok és a típusú arcok között. A betűtípus párosítása egy kicsit kevésbé elsöprő betűtípust választ.

TypeSettings

TypeSettings a CSS szabálykészlet gyűjteménye a megfelelő betűméretezés, a függőleges ritmus és a tipográfia érzékeny arányának meghatározására. A TypeSettings a Sass és a Stylus rendszerben érhető el, amely lehetővé teszi, hogy a változók beállításával rugalmasan megfeleljen a projekt igényeinek.

Típusazonosítótábla

Típusazonosítótábla talán az egyik legteljesebb indító készlet a tipográfia beállításához. A tipográfiai lapok egy csomó alapvető tipográfiai stílust tartalmaznak, amelyek a méretezést, a színeket, a kis tőkét, a csepegtetőt, a behúzást, az elválasztást, a blokkjelzést, a kódblokkot és a még sok más dolgot tartalmazzák.

Most olvassa el: A szép tipográfiai webes tervek bemutatása