Kuidas ühendada font veebisaidiga, kasutades @font-face'i.

@font-face on CSS-reegel, mis võimaldab kirjastiili kuvamist veebilehtedel internetis. Enne selle reegli olemasolu võisid veebimeistrid kasutada oma veebilehtedel piiratud hulka fonte, mis on kõige levinumad ja kasutajate arvutitesse paigaldatud. @font-face'i tulekuga saab veebisaidile hõlpsasti lisada mis tahes kindla kirjastiili.

Kui olete fondi meie saidilt alla laadinud, leiate arhiivist koos fontidega valmis CSS-koodi, mis tuleb kopeerida ja paigutada projektile lisatud CSS-dokumenti.

Samm-sammult paigaldamine

1. Valige soovitud font ja klõpsake "download for website".

Kuidas fondi alla laadida

2. Looge oma saidi juurest kaust fonte ja kopeerige alla laetud fondid.

Looge kirjatüüpide kataloogi

Avage oma CSS-dokument ja kopeerige arhiivi tekstifaili sisu sinna.

CSS dokument, ühendusfont

4. Veenduge, et fondi kausta tee on õigesti kirjutatud. Sõltuvalt kausta asukohast, kus kirjastiilid asuvad, võib tee sisaldada ühte või mitut punkti.

Valige õige viis

5. Tehtud. Kopeeri perekonnanimega omadus ja kleebi see selektorisse, mille jaoks sa stiilid kirjutad.

Valmis @font-face

Mis siis, kui ma olen fondi juba mujalt alla laadinud ja tahan seda ühendada?
 

Sellisel juhul peate leidma internetist fontikonverteri ja konverteerima oma ttf-fondid (või otf) õigetesse formaatidesse, nimelt eot, svg, woff ja woff2. Sellega tagatakse, et font kuvatakse ja töötab õigesti kõigis brauserites, samuti mobiilseadmetes.

Seejärel peate @font-face reegli ise välja kirjutama, järgides selle süntaksit.

@font-face süntaks

@font-face süntaks

Reegli süntaksit võib jagada laias laastus põhiomadusteks ja täiustatud omadusteks.

Basic:

  • font-family - täpsustab fondi nime.
  • src - tähistab kirjastiili teed. See võib olla teie veebisaidi serveris asuva kirjastiili URL, kellegi teise serveris asuvate kirjastiilide URL (näiteks Google Fonts) või lihtsalt kasutaja arvutis asuva kirjastiili nimi (Helvetica New Bold, Tahoma, Georgia jne.) .

Laiendatud:

  • font-display - määrab, kuidas font ilmub, sõltuvalt sellest, kas see on alla laaditud ja valmis kasutamiseks.
  • font-stretch - võimaldab teil reguleerida teksti laiust.
  • font-style - määrab, kas font on tavaline, kursiivne või kaldkirjas (viimased kaks ei ole samad).
  • font-weight - Seadistab kirjastiili küllastust, skaalal 100 kuni 900 (100-madal, 900-madal).
  • font-variant - määrab, kuidas väiketähed esitatakse - jätke need muutmata või tehke need kõik väiketähed (suurtähed).
  • font-feature-settings - võimaldab teil hallata OpenType-fontide täiustatud tüpograafilisi funktsioone.
  • font-variations-settings - võimaldab madalal tasemel kontrollida Open Type ja TrueType'i kirjatüüpide variante, määrates neljatähelised telgede nimed.
  • unicode-range - määrab kindlaks kirjastiilis kasutatavate Unicode-koodide (glüüfide) vahemiku.

Kirjastiili ühendamine oma veebisaidiga Google Fonts'i abil


Google Fonts'i kasutamine on lihtsaim viis fondi ühendamiseks teie veebisaidiga. Mine nende veebisaidile, leia soovitud font, vali õige fontide paigaldamiseks ja kopeeri kood.

Valige kirjatüüp

Valige kirjatüübid

Kopeerige kood

Kopeeritud kood tuleb paigutada oma html-lehekülje päise sildi sisse.

Embed code in the body of the head tag

Selle meetodi puuduseks on see, et kui saitide koostamise ajal on teil kadunud internet - fonte ei kuvata ja asendatakse standardsetega, sest failid ei asu kohalikus arvutis, vaid Google'i serverites. Samuti on tõenäoline, et kui te tulete kliendi juurde kujunduse esitlusele (või lihtsalt teavitamiseks) ja tal ei ole Wi-Fi, tekib probleem uuesti.


Uuendatud:

2018-07-20

Autor:
Kuidas ühendada font veebisaidiga, kasutades @font-face'i.
Hinda seda artiklit:

4 /63 aadressilt 5

Kommentaarid (0)