🐿️ Leturíkorni - 25 vinsælar leturgerðir + hvernig á að bæta við síðu [5 skref]

Þökk sé síðum eins og Font Squirrel geturðu notað hvaða tegund eða stíl letur þú vilt á vefsíðu. Valkostir voru áður takmarkaðir við nokkur venjuleg vefrit sem allir þurftu að nota. Í dag eru miklu fleiri möguleikar í boði. Þú ert ekki lengur takmarkaður við nokkur vefsamhæft letur. Nú er hægt að hlaða niður leturgerðum á flugu einfaldlega með því að fá aðgang að vefsíðu.

Vefsíður eins og Font Squirrel, með aðgang að hundruðum og þúsundum atriða eru mjög vinsælar. Það er leturgerðarvefurinn á vefnum sem gerir það auðveldara en nokkru sinni fyrr að nota sendingar frá þriðja aðila sem og sýningarskrár.

Frekar en að nota venjulegar leturgerðir eins og Arial, Calibri og Helvetica Neue, getum við notað CSS @ font-face regluna. Þetta gerir okkur kleift að nota hvaða letur sem er án þess að þurfa að setja það upp í tækjum gesta. Þetta er frábær kostur sem veitir tjáningarfrelsi fyrir vefsíðuhönnuðinn og hámarks notagildi fyrir notandann.

Lestu meira: Hvernig á að læra CSS (Smashing Magazine)

Þetta hefur gert það mjög auðvelt að bæta við Font íkorna og öðrum leturgerð sem þú velur á síðuna þína.

Í þessari kennslu munum við sýna þér hvernig á að nota Font Squirrel á vefsíðunni þinni. Þú getur notað sama hugtak til að bæta hvaða leturgerð sem er á síðuna þína, þar á meðal FontAwesome. 

Bættu við Font Squirrel á vefsíðuna þína

1. Finndu FontSquirrel letrið sem þú vilt

• heimsókn Letur íkorna og veldu Finna til að leita að leturgerðinni sem þú vilt bæta við.
• Veldu þann sem þú vilt nota á vefsíðunni þinni sem hluta af vefhönnun þinni. Þú getur notað hina ýmsu flokka til að finna leturgerðina sem þú vilt nota, finna vinsælustu, nýlega bættu, heitu eða vinsælu viðbæturnar. Það er úr þúsundum að velja. Veldu þann sem hentar best fyrir verkefnið sem þú ert að vinna að.

2. Sæktu Font íkorna WebFont búnaðinn

• Þegar þú hefur valið letrið sem þú vilt nota skaltu smella á WebFont Kit hnappinn efst til hægri á skjánum.
• Smelltu á Download @ font-face kit.

 Niðurhalið mun innihalda zip-skrá með fjölda skráa, þar á meðal hvernig á að nota vefletrið, öll leyfi sem tengjast þessari leturgerð íkorna og auðvitað skrána sjálfa.

3. Sendu Font Squirrel skrárnar inn á síðuna þína

• Dragðu úr skránni - hún verður dregin út í möppu með nafni hlutarins sem þú valdir.
• Settu ALLAR skrárnar inn í CSS möppuna á vefsíðunni þinni. Þú munt hafa fjölda skrár sem þú þarft að hlaða inn, þar á meðal:

1. leturnafn-webfont.eot,
2. leturnafn-webfont.svg,
3. leturheiti-webfont.ttf,
4. leturnafn-webfont.woff,
5. stílblað.css

4. Bættu leturgerðinni við CSS stílblaðið þitt

Lokaskrefið mun breytast svolítið eftir því hvernig leturgerðir eru notaðar á vefsvæðinu þínu. Þú finnur leturgerðarskilgreiningar þínar í CSS skránni. Það ætti að hringja í skrána stílblað.css. Þú ættir að finna CSS skrána sem notuð eru á vefsvæðinu þínu og bæta við Font íkorna skrám þar með því að nota eftirfarandi. Bættu eftirfarandi við stylesheet.css skrána þína í staðinn fyrir:

@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ef þú hefur hlaðið leturgerðum í TYPES möppuna breytist kóðinn mjög lítillega í:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

5. Breyttu CSS yfirlýsingum til að nota bætt FontSquirrel hluti 

Þegar þú hefur bætt ofangreindum yfirlýsingum við stílblaðið þarftu að breyta því aðeins meira til að nota leturgerðina í raun. Þegar þú hefur bætt við ofangreindum kóða þarftu að breyta stílblaðinu frekar til að nota nýju gerðirnar sem þú hefur bætt við.

Gerðu þetta með því að breyta leturgerðinni í heiti valkostsins sem þú valdir. Til dæmis, ef þú vildir nota nýju gerðina með hausunum þínum - finndu CSS í hausnum og breyttu því í samræmi við það. 

Uppfærðu CSS yfirlýsinguna með FontSquirrel nafninu sem þú hefur hlaðið niður.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 Auðvitað er hægt að nota leturfjölskylduna í hvaða CSS tag sem þú þarft!

Ef þú hefur fylgt öllum ofangreindum skrefum rétt, þegar þú hefur endurhlaðið stílblaðið, ættirðu að hafa nýja leturgerð íkorna sem þú varst að bæta við vefsíðuna þína!

Ef ekki skaltu bara koma verktaki verkfæra vafrans þíns til að athuga hvort rétt sé farið í allar skrárnar. Ef ekki skaltu athuga CSS til að ganga úr skugga um að þú hafir stafsett leturheitið rétt. 

Skoðaðu hvernig á að gera þetta sem YouTube myndband og hvernig á að breyta letri í hvaða WordPress þema sem er.

25 vinsælustu leturgerðirnar á Font Squirrel

Ef þú ert að leita að innblæstri fyrir letur til notkunar eru hér 25 heitustu leturgerðirnar á Font Squirrel núna.

1. Montserrat

Montserrat er nútímalegt leturgerð í þéttbýli sem fæst í mörgum lóðum. Það virkar í návígi og í fjarlægð og gæti virkað vel á vefnum.

https://www.fontsquirrel.com/fonts/montserrat

2. Opna Sans

Open Sans ætti ekki að þurfa kynningu. Það er eitt vinsælasta letur í heimi og er hreint, nútímalegt og sveigjanlegt.

https://www.fontsquirrel.com/fonts/open-sans

3. Roboto

Roboto er annað gífurlega vinsælt leturgerð á vefnum þökk sé hreinum línum, óþekktum útliti og sveigjanleika.

https://www.fontsquirrel.com/fonts/roboto

4. Raleway

Raleway er svipað útliti og Roboto en er líka einstök. Annað hreint og létt letur sem myndi virka vel í öllum aðstæðum.

https://www.fontsquirrel.com/fonts/raleway

5. Lato

Lato hefur verið í næstum 10 ár þökk sé virkni þess, nútímalegu útliti og miklu jafnvægi.

https://www.fontsquirrel.com/fonts/lato

6. Bebas Neue

Bebas Neue er túlkun á upprunalega Bebas Neue ókeypis letri eftir Ryoichi Tsunekawa. Það er mjög aðlaðandi leturgerð sem er gífurlega vinsælt.

https://www.fontsquirrel.com/fonts/bebas-neue

7. Poppins

Poppins er létt og áhyggjulaust letur með miklu jafnvægi. Það er líka mjög nútímalegt, sem þýðir að það gæti virkað í mörgum útfærslum.

https://www.fontsquirrel.com/fonts/poppins

8. Frábær vibbar

Great Vibes er flæðandi leturgerð í rithönd sem er enn læsilegt á mismunandi skjástærðum. Þetta hentar sér vel til að vera notaður við hámarka hönnun.

https://www.fontsquirrel.com/fonts/great-vibes

9. Alex bursti

Alex Brush er annað flæðandi handskrifað burstahandrit sem er læsilegt á mismunandi skjástærðum. Það er afslappaðra að taka á þemað með ákveðinni áfrýjun.

https://www.fontsquirrel.com/fonts/alex-brush

10. Kviksand

Kviksand er léttur og lúmskur og hefur loftgóða tilfinningu fyrir því. Blanda af nútímalegum og duttlungafullum leturgerðum gæti verið tilvalin í ýmsum vefhönnun.

https://www.fontsquirrel.com/fonts/quicksand

11. Oswald

Oswald er þyngri og eindregnari leturgerð sem hefur mikla læsileika á mismunandi vegalengdum. Það er líka óskemmtilegt og nútímalegt sem virkar vel.

https://www.fontsquirrel.com/fonts/oswald

12. Heimild án pro

Source Sans Pro er þróun á einu fyrsta opna leturgerð Adobe. Það hefur verið breytt og aukið jafnt og þétt, þar sem þetta er eitt besta dæmið.

https://www.fontsquirrel.com/fonts/source-sans-pro

13. Playfair Display

Playfair Display er hefðbundnara letur með nútímalegu ívafi. Það er í góðu jafnvægi og gæti virkað við alls konar aðstæður.

https://www.fontsquirrel.com/fonts/playfair-display

14. Mjólkurhristingur

Milkshake er þyngri letur með amerískt þema. Það var upphaflega teiknað með pensli áður en það var breytt í leturgerð.

https://www.fontsquirrel.com/fonts/milkshake

15. Kaushan handrit

Kaushan Script hefur asískan þátt sem töfrar fram sýnir Saigon á þriðja áratug síðustu aldar. Það er fallegt leturgerð með víðtæka skírskotun.

https://www.fontsquirrel.com/fonts/kaushan-script

16. Chunkfive

Chunkfive er lýsandi nafn fyrir þetta klumpa letur. Það er feitletrað letur sem hefur áhrif og gæti virkað vel fyrir fyrirsagnir eða fyrirsagnir.

https://www.fontsquirrel.com/fonts/chunkfive

17.Amatic

Amatic minnir á töfluritun eða Simpsons hefur samt alveg sinn karakter. Það gæti virkað vel á less formlegar vefsíður.

https://www.fontsquirrel.com/fonts/amatic

18. allúra

Allura er annað flæðandi handskrifað letur sem er mjög ánægjulegt fyrir augað. Vandað íhugun gæti notað þetta letur mjög vel.

https://www.fontsquirrel.com/fonts/allura

19. Deild Spartverja

League Spartan er ekkert bull letur sem hefur mikla nærveru. Það gæti virkað fullkomlega sem fyrirsögn eða innan ákalls til aðgerða.

https://www.fontsquirrel.com/fonts/league-spartan

20. Metropolis

Metropolis er nútímalegt rúmfræðilegt leturgerð sem augljóslega hefur verið undir áhrifum frá nokkrum af vinsælli leturgerðum. Þetta er frábær túlkun.

https://www.fontsquirrel.com/fonts/metropolis

21. Kyrrahaf

Pacifico er létthjartað flæðandi letur sem töfrar fram hugsanir um Pepe gallabuxur og Ameríku frá sjöunda áratugnum. Það er áhrifaríkt letur í arfleifð.

https://www.fontsquirrel.com/fonts/pacifico

22. Aller

Aller er hrein, létt og nútímaleg hönnun sem angular útlit hentar vel nútímalegri vefhönnun.

https://www.fontsquirrel.com/fonts/Aller

23. Josefin Sans

Josefin Sans tekst að sameina nútíma og arfleifð og gæti verið mjög sveigjanlegt letur í miklu úrvali hönnunar.

https://www.fontsquirrel.com/fonts/josefin-sans

24. Black Jack

Black Jack er flæðandi letur með óformlegu útliti. Það gæti virkað vel í afslappaðri, kómískri eða afslappaðri hönnun.

https://www.fontsquirrel.com/fonts/blackjack

25. Humar

Humar hefur yfirbragð vörumerkis, kannski Nýja Englands eða einhvers staðar við sjóinn. Frábært leturgerð til að nota ef hönnunin hentar.

https://www.fontsquirrel.com/fonts/Lobster

Algengar spurningar

Hvað er Font Squirrel?

Letur íkorna er geymsla vefja leturgerða sem fengnir eru frá frjálsum og opnum hugbúnaði. Öllum leturgerðum er hægt að hlaða niður og nota ókeypis, jafnvel í viðskiptum.

Hvernig sæki ég vefletur frá Font Squirrel?

Það er auðvelt að hlaða niður vefletri frá Font Squirrel. Auðkenndu letrið sem þú vilt nota, halaðu niður skránni sem inniheldur letrið. Settu skrárnar inn á vefþjóninn þinn og láttu leturgerðarnafnið fylgja með stylesheet.css. Prófaðu síðan til að ganga úr skugga um að leturgerðin þín hlaðist.

Hver er vinsælasta letrið núna?

Vinsælasta letrið núna er Helvetica. Samkvæmt Wired er Helvetica vinsælasta leturgerð í heimi þrátt fyrir að vera 62 ára.

Hvað er töffasta letrið til að nota?

Fyrir utan Helvetica eru töff leturgerðirnar til að nota samkvæmt Lifehack Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni og Didot.

Hvernig á að nota letur íkorna?

Eftir að þú hefur hlaðið niður leturgerðinni sem þú vilt nota geturðu hlaðið þessu upp á vefsíðuna þína og búið til CSS með leturgerðinni samkvæmt leiðbeiningunum hér að ofan til að setja þetta leturgerð inn á vefsíðuna þína.

Um höfundinn

Höfundur: David AttardVefsíða: https://www.linkedin.com/in/dattard/Tölvupóstur: david@collectiveray. Með

David hefur starfað í eða við net- / stafræna iðnaðinn síðustu 18 ár. Hann hefur mikla reynslu af hugbúnaðar- og vefhönnunargeiranum með því að nota WordPress, Joomla og veggskot í kringum þau. Sem stafrænn ráðgjafi er áhersla hans lögð á að hjálpa fyrirtækjum að ná samkeppnisforskoti með því að nota sambland af vefsíðu þeirra og stafrænum kerfum sem eru í boði í dag.