15 Noderīgi tīmekļa tipogrāfijas rīki, bibliotēkas un ietvarstruktūras
Darbs ar tipogrāfiju tīmeklī ir bijis reāls. Katram pārlūkam ir savs algoritms, lai padarītu fontus kas varētu izraisīt neparedzētas neatbilstības. Ir tikai dažas CSS īpašības, ko var izmantot, lai kontrolētu fontus, piemēram, fontu kerning, fontu izlīdzināšana, radot DropCaps utt. Papildus tam mums ir jārisina daudz izkārtojuma problēmu, kad runa ir par fontiem.
Labā ziņa ir, ka ir resursi, kurus varat izmantot, lai pārņemtu riteni, kad runa ir par mājas lapas tipogrāfiju. Šeit ir 15 tīmekļa rīki, bibliotēkas un sistēmas šim nolūkam varat izmantot.
Vairāk par Hongkiat:
- 9 WordPress spraudņi, ko darīt vairāk ar saviem fontiem
- 20 Best WordPress tipogrāfijas spraudņi, lai uzlabotu lasāmību
- Labākas un asākas UI ikonas ar tīmekļa fontiem
TypeRendering
Īsumā, TypeRendering darbojas līdzīgi kā Modernizr, izņemot tikai pārlūkprogrammas dzinēja identifikāciju. Šī bibliotēka pievieno pielāgotas klases, pamatojoties uz tās atklājumiem, ko var izmantot, lai piemērotu konkrētus veidlapu atveidošanas noteikumus.
KerningJS
Kerning vēl nav pielāgojams lietošanai tīmeklī - font-kerning šobrīd atbalsts joprojām ir slikts, bet mūsu standarta ceļš sākas ar jaunu standarta īpašumu. KerningJS ir Javascript bibliotēka, kas sniedz jums dažas jaunas īpašības, piemēram, labākai kontrolei -burtu kerns.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Ņemiet vērā, ka iepriekš minētais piemērs ir nestandarta un piemērojams tikai ar KerningJS.
DropcapJS
Lai gan dropcap izveide ir iespējama ar pašreizējiem CSS standartiem, rezultāts vēl nav pilnīgs. Dažreiz tas ir pilnīgi nevēlams. Adobe Web platformas izstrādātajam DropcapJS uzdevumam ir ļaut web dizainerim viegli piemērot perfektu pilskalni.
LiningJS
LiningJS ir JavaScript bibliotēka, kas pievieno līnija klasē katrā rindkopā. Tas ļauj veidot līniju atsevišķi. Tas simulē ideju par :: nth-line (), :: n-pēdējā rinda () un :: last-line pseido klases, kas vēl nav sastopamas CSS. Šeit ir piemērs tam, kā mēs veidojam rindkopas pirmo rindu ar LiningJS:
p .line [pirmais] font-weight: 600; teksta pārveidošana: lielie burti;
Turklāt LiningJS atbalsta arī Ķīnas rindkopu plūsmu.
UnderlineJS
UnderlineJS ir JavaScript bibliotēka, kas padara tekstu labāku. Iepazīstieties ar demo, lai redzētu, ko es domāju, pārliecinieties, ka novietojiet virs līnijām. Salīdziniet demonstrāciju ar pašreizējās CSS pasvītrojumu teksta apdare standarts un jūs, iespējams, esat arī underlineJS ventilators.
FlowType
Šis spraudnis dinamiski pielāgos fonta lielumu, pamatojoties uz konkrētu apvalka platumu. FlowType palīdz jums piemērot ideālu rakstzīmju skaitu katrā rindā jebkurā ekrāna platumā. Bibliotēkā ir opcijas, kurās var iestatīt min / max ekrāna platumu, min / max fonta lielumu un fontu attiecību.
HatchShow
HatchShow paplašina fonta lielumu, lai aizpildītu visu tās konteinera platumu. Spraudnis darbojas ārpus lodziņa ar algoritmu; Īsumā, tas mēra konteinera platumu un fonta rakstzīmes garumu un pievieno pareizo fonta lielumu.
GridLover
GridLover ir lielisks līdzeklis, lai radītu pamata stilu tipogrāfijas izkārtojumam (izmērs, līnijas augstums un starpība) ar vieglu slīdni UI. Tas rada stilus SCSS, LESS un Stylus, lai jūs to varētu iekļaut savā projektā neatkarīgi no tā, kuru CSS-Preprocessor jūs izmantojat.
TypeScale
TypeScale ir tiešsaistes rīks, kas palīdzēs jums viegli noteikt pareizo fontu lielumu jūsu vietnei. Šis rīks nodrošina vienkāršu intuitīvu GUI, lai ievietotu bāzes fontu lielumu, mērogu un fontu saimi, kuru vēlaties izmantot. Rezultāti tiks vizualizēti jums, lai jūs varētu spēlēt apkārt ar skalu, lai iegūtu tikai pareizo vērtību. Vienkārši satveriet CSS, kad esat pabeidzis.
Moduļu skala
Moduļu skala ir instruments, lai ģenerētu ideālu fontu mērogu ķermeņa un virsraksta tekstam. Tas izvadās Sass, kas jāizmanto kopā ar Sass bibliotēku. Varat arī izmantot JavaScript .
Fontu platums
Fontu platums (FTW) ir Javascript bibliotēka, kas nodrošina fontu atbilstību tās platuma konteineram. Tas noteiks fonta lielumu kopā ar vārdu, kas nepieciešams fontam. Ja vēlaties izveidot diezgan lielu virsrakstu, tā ir bibliotēka, kuru vēlaties izmēģināt.
FFFFallback
FFFFallback, ērts rīks, kas ļauj jums atrast labāko fontu kaudzi, kas pazeminās graciozi. Šis rīks ir grāmatzīmju veidā, kas analizēs jūsu lapas fontu saimi un ieteiks fontu kopu, kas jāizmanto kā rezerves kopija.
Fonta pāris
Google fonts ir viens no populārākajiem tīmekļa fontu bibliotēkiem, ko izmanto miljoniem, un uzņēmējas virs 500 fontu ģimenēm. Fonta pāris ir pārī apvienotu Google fontu kolekcija, kur var viegli atrast dažādu kombināciju starp fontu ģimenēm un veidiem. Fonta pāris padara mazliet mazāk milzīgu fonta pārī savienojumu izvēli.
TypeSettings
TypeSettings ir CSS noteikumu kopuma kolekcija, lai definētu pareizu fontu mērogošanu, vertikālo ritmu un tipogrāfijas atsaucību. TypeSettings nāk Sass un Stylus, kas ļauj elastīgi izpildīt jūsu projekta vajadzības, pielāgojot mainīgos.
Tipogrāfija
Tipogrāfija iespējams, ir viens no pilnīgākajiem starta komplektiem tipogrāfijas iestatīšanai. Ierakstiet kuģus ar dažiem galvenajiem tipogrāfijas stiliem, kas skar mērogošanu, krāsas, mazu kapitālu, kritumu, ievilkšanu, defisi, bloku, kodu bloku un daudz vairāk sīkumu.
Tagad lasiet: Izstādē Web dizainu ar skaistu tipogrāfiju
