Kuinka käyttää fontteja parhaiten CSS: ssä?

Tässä artikkelissa esitellään yksinkertainen mutta tärkeä aihe, joka on Fontit ja antaa sinulle myös käytännön esittelyn aiheesta. Seuraavat vihjeet käsitellään tässä artikkelissa,

• Fontit CSS: ssä
• Attribuutit CSS-fontissa
• font-style -attribuutti
• font-weight -attribuutti
• font-size attribuutti
• font-family-attribuutti

Verkkosivustot sisältävät sisältöä kuvina, ääni-, video- ja tekstisisällönä. Useimmat verkkosivut luottavat kuitenkin edelleen tekstiin hallitsevana muotona. Tämä johtuu siitä, että pelkkä teksti tarjoaa joitain erittäin merkittäviä etuja.

Ei-häiritsevä luettavuus - Haluat tarkistaa viimeisimmät ottelutulokset ollessasi toimistossa. Haluat tietysti nopean tekstipäivityksen, ei meluisaa videota!
Pieni verkon kaistanleveysvaatimus - Tekstisisältöä voidaan ladata jopa huonoilla Internet-yhteyksien alueilla, kun taas multimedia ei.
Hakuystävällinen - Web-sivustot seuraavat aina, kuinka helposti niiden sisältö huomataan hakukoneissa. Teksti soveltuu parhaiten tähän ainakin siihen asti, kunnes tekoäly ottaa kokonaan haltuunsa Internetin!

Muotoillessaan tekstisisältöä web-suunnittelijoilla on vain vähän parametreja - kirjasinta, tasausta, korostusta ja väriä. Oikean fontin valitseminen tekstille on kriittinen valinta. Tavallisena käytäntönä on käyttää CSS-kirjasintunnisteita fonttien määrittelemiseen HTML-sivujen tekstille.
Jos olet uusi HTML-ohjelmoinnin maailmassa, hanki aloitusretki täältä. Haluat ehkä lukea CSS: n perusteet ennen kuin opit CSS-kirjasimista.

Löydät kattavan CSS-opetusohjelman käymällä Edureka CSS -oppaassa aloittelijoille. Saat erinomaisen heads-upin tavasta, jolla CSS: ää käytetään HTML-verkkosuunnittelun täydentämiseen.

Tämän CSS: n fontteja koskevan artikkelin jatkaminen

Fontit CSS: ssä

Fontti on pohjimmiltaan joukko ominaisuuksia, jotka liittyvät tekstin näyttämiseen. Fontit erotetaan toisistaan ​​niiden koon, sisennyksen, leveyden, vinon ja niin edelleen. Aloitetaan perustekstinäytöllä eri kirjasimilla.

Esimerkki 1: Otsikot ja kappaleet eri kirjasimilla

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Kohta kursiivilla lihavoidulla Georgian fontilla
 

 Esimerkki 1: Tuotos 

Esimerkissä 1 meillä on 3 erilaista tekstiriviä eri kirjasimilla. Huomaa, että jokainen fontti vaihtelee merkkileveydeltään, sisennyksiltään jne.

Tämän CSS: n fontteja koskevan artikkelin jatkaminen

Attribuutit CSS-fontissa

CSS-kirjasimilla on 4 ensisijaista määritettä - tyyli, paino, koko ja perhe. Style-attribuutti tarkoittaa normaalia tai kursivoitua. Paino näyttää fontin tavallisena tai lihavoituna. Paino voidaan ilmaista myös numeerisesti. Koko on yksinkertaisesti kirjasinkoko suurempi koko, suurempi teksti ulkonäöltään. Kirjasinkoko voidaan määrittää useilla tavoilla, yksityiskohtaiset kuvaukset annetaan myöhemmissä osioissa. Perhe-attribuutti on määrittää fontin nimi tekstille.

Esimerkissä 1 olemme käyttäneet otsikoihin ja kappaleisiin erilaisia ​​fonttien nimiä. H1- ja p-tunnisteiden alla näkyy kaksi fontin nimeä, kun taas h2-tunnisteissa nimetään vain yksi kirjasin. Tämä on kirjasinperheen määritelmä, lisätietoja tästä myöhemmin.

Tämän CSS: n fontteja koskevan artikkelin jatkaminen

font-style -attribuutti:

Kaksi ensisijaista tyyliä voidaan asettaa ovat 'normaali' ja 'kursiivi'. Kursiivien oletetaan olevan luonteeltaan kursiivisia ja vinoja. Normaali on oletusasetus, joka on suora. On toinenkin vähemmän käytetty vaihtoehto nimeltä viisto, joka muistuttaa kursiivia useimmissa kirjasimissa. Voit myös asettaa tyylin perimään niin, että se ottaa fonttityylin ylätason elementistä.

Tämän CSS: n fontteja koskevan artikkelin jatkaminen

font-weight attribuutti:

Tämä ominaisuus päättää, pitäisikö fontin näyttää paksulta vai ohuelta. Se voidaan asettaa normaaliksi tai rohkeaksi. Oletusarvo on normaali. Tämä arvo voidaan asettaa myös numeeriseksi. Paino 400 edustaa normaalia ja 700 on lihavoitu. On olemassa muutamia muita asetuksia (vaihtelevat 100: sta - erittäin kevyestä 900: een - erittäin rohkea), mutta kaikki fontit eivät tue niitä. Kaikki painovaihtoehdot on esitetty esimerkissä 3.

Tämän CSS: n fontteja koskevan artikkelin jatkaminen

font-size attribuutti:

Koko-määrite voidaan asettaa useilla tavoilla. Seuraavassa luetellaan nämä tavat.
● lueteltu arvo, kuten ”keskitaso”, ”suuri”. Itse asiassa aivan kuten vaatekoot, arvot voivat vaihdella XX Pienestä XX Suureen!
● Aseta sen pääelementtiin suhteessa ”suurempi” tai ”pienempi”.
● Prosenttiosuus pääelementin koosta.
● Määritä perinnöksi, jos haluat hyväksyä pääelementin koon suoraan.
● Absoluuttisena arvona pikseleinä (pikseleinä), pt (pisteinä) tai cm (senttimetreinä)
”Medium” on tälle parametrille asetettu oletusarvo.

Tämän CSS: n fontteja koskevan artikkelin jatkaminen

font-family -attribuutti:

HTML-muodossa CSS-fonttiperhe on tarkoitettu fontin nimen asettamiseen. Voit joko lisätä vain yhden fontin nimen tunnisteeseen. Tai voit määrittää useita arvoja fonttiperheiden luetteloksi, joka määrittää prioriteetin, jolla selaimen tulisi valita kirjasin.
Luettelo on priorisoitu vasemmalta oikealle varajärjestelmän muodossa. Ensimmäinen arvo, jos se on käytettävissä, valitaan tai ohjaus siirtyy seuraavaan, kunnes luettelon loppu on saavutettu. Oletusfonttiperhe määritetään selaimen asetuksissa.
CSS-fonttiperheitä on kahden tyyppisiä - yleisiä perheitä ja kirjasinperheitä.
● Geneeriset perheet - joidenkin yleisten ominaisuuksien perusteella fontit on ryhmitelty ”serif”, ”sans serif”, ”monospace” jne. Esimerkiksi Sans serif tarkoittaa fontteja ilman serif-tyyliä.
● Sukunimet - kirjasimet, jotka kuuluvat tiettyihin sukuhierarkioihin. Times, Arial, Courier ovat kaikki kirjasinperheitä ja Times New Roman on esimerkki Times-perheen fontista.
Eri kirjasinperheen käyttöasetukset on lueteltu alla olevassa esimerkissä 4.

Joitakin yleisiä huomioitavia seikkoja

● Kuten monet muutkin CSS-ominaisuudet, jotkin fontin asetukset vaihtelevat eri selaimissa. Tarkista selaintuki, ennen kuin käytät joitain harvinaisia ​​fontti-asetuksia.
● Voit asettaa kirjasinasetukset erikseen käyttämällä fonttityylin, fontin painon jne. Yksittäisiä tunnisteita. Vaihtoehtoisesti, jos haluat pienikokoisen koodin, voit käyttää lyhytfontttimääritettä kaikkien arvojen kanssa samalla rivillä.
● Käyttäjäskenaarioissa, joissa haluat fontin koon vaihtelevan selaimen koon mukaan, on hyödyllinen fontin koon asetus, jota kutsutaan responsiiviseksi fonttiasetukseksi. Se voidaan asettaa vw-yksiköllä, mikä tarkoittaa 'näkymän leveyttä'. Tällä tavoin tekstin koko seuraa selainikkunan kokoa.

Toivottavasti löysit etsimäsi tiedot CSS-fonteista. Jaa kokemuksesi kanssamme alla olevassa kommenttiosassa. Hyvää suunnittelua!

Jos haluat oppia lisää verkkokehityksestä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.