Hvernig á að bæta við leturgerð íkorna og tegundum við vefsíðuna þína í 5 einföldum skrefum

leturgerð íkorna

Þö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ð.

 finndu leturgerðir íkorna leturgerðir

 

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.

fontsquirrel niðurhala webfont Kit

 

fontsquirrel sækja 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

 

letur íkorna senda skrár

 

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ð.

 

finndu núverandi leturfjölskyldu

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.

 

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

Montserrat

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

Opna Sans

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

Vélmenni

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

Raleway

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

Lato

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

Bebas Neue

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

Poppins

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

Frábær vibbar

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

Alex bursti

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

Quicksand

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

Oswald

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

Heimild án pro

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

Playfair skjár

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

Mjólkurhristingur

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

Kaushan handrit

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

Chunkfive

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

Amatic

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

Allúra

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

Spartan deildin

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

Metropolis

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

pacific

21. Pacifico

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

fara

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

Josefin Sans

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

Black Jack

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

humar

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.

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, töffustu leturgerðirnar sem hægt er að nota samkvæmt Lifehack fela í sér Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni og Didot.

 

 

Um höfundinn
David Attard
Höfundur: David AttardVefsíða: https://www.linkedin.com/in/dattard/
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.

Eitt í viðbót... Vissir þú að fólk sem deilir gagnlegu efni á borð við þessa færslu lítur ótrúlega líka út? ;-)
vinsamlegast yfirgefa a gagnlegt skrifaðu athugasemdir við hugsanir þínar, deildu þessu síðan á Facebook hópinn þinn / hverjum sem myndu finnast þetta gagnlegt og við skulum uppskera ávinninginn saman. Takk fyrir að deila og vera fín!

Birting: Þessi síða getur innihaldið tengla á ytri vefsíður fyrir vörur sem við elskum og mælum af heilum hug. Ef þú kaupir vörur sem við leggjum til gætum við unnið okkur inn tilvísunargjald. Slík gjöld hafa ekki áhrif á ráðleggingar okkar og við tökum ekki við greiðslum fyrir jákvæða dóma.

Höfundur (ar) Valin þann:  Merki tímarits Inc   Sitepoint merki   CSS bragðarefur merki    vefhönnunarpottamerki   WPMU DEV merki   og margir fleiri ...