Kako najbolje uporabiti pisave v CSS?

Ta članek vas bo seznanil s preprosto, a pomembno temo, ki je Fonts In in vam bo tudi praktično predstavil to temo. V tem članku bodo zajeti naslednji napotki:

• Pisave v CSS
• Atributi v pisavi CSS
• atribut sloga pisave
• atribut teže pisave
• atribut velikosti pisave
• atribut družine pisav

Spletna mesta vsebujejo vsebino v obliki slik, avdio, video in besedilnih vsebin. Vendar se večina spletnih strani še vedno opira na besedilo kot prevladujočo obliko. To je zato, ker navadno besedilo ponuja nekaj zelo pomembnih prednosti.

Nevsiljiva berljivost - med pisarno želite preveriti najnovejši rezultat tekme. Očitno želite hitro posodobitev besedila in ne hrupnega videa!
Zahteva po nizki pasovni širini omrežja - besedilno vsebino je mogoče naložiti tudi na območjih s slabo internetno povezljivostjo, bogati mediji pa ne.
Prijazno iskanju - spletna mesta vedno spremljajo, kako enostavno je njihova vsebina opazna v iskalnikih. Besedilo je za to najbolj primerno, vsaj dokler AI popolnoma ne prevzame interneta!

Med oblikovanjem besedilne vsebine imajo spletni oblikovalci le nekaj parametrov, na katerih lahko delujejo - pisava, poravnava, poudarjanje in barva. Izbira prave pisave za besedilo je ključna izbira. Običajna praksa je uporaba oznak pisave CSS za določanje pisav za besedilo na straneh HTML.
Če ste nov v svetu programiranja HTML, si oglejte osnovno začetno turo tukaj. Preden začnete z učenjem o pisavah CSS, boste morda želeli prebrati osnove CSS.

Za izčrpno vadnico CSS obiščite Edureka CSS Vadnica za začetnike. Dobili boste odlične informacije o tem, kako naj se CSS uporablja za povečanje spletnega oblikovanja HTML.

Nadaljujemo s tem člankom o Pisave v CSS

Pisave v CSS

Pisava je v bistvu nabor značilnosti, povezanih s prikazom besedila. Pisave se med seboj razlikujejo po velikosti, zamiku, širini, poševnosti itd. Začnimo z osnovnim prikazom besedila v različnih pisavah.

kako narediti v moči

Primer 1: Naslovi in ​​odstavek v različnih pisavah

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: ležeče krepko 12px / 30px Georgia, serif}
Odstavek v ležeči krepki pisavi Georgia
 

 Primer 1: Izhod 

V primeru 1 imamo 3 različne vrstice besedila v različnih pisavah. Opazili boste, da se vsaka pisava razlikuje glede na širino znakov, vdolbine itd.

Nadaljujemo s tem člankom o Pisave v CSS

Atributi v pisavi CSS

Pisave CSS imajo 4 glavne lastnosti - slog, težo, velikost in družino. Atribut slog označuje normalno ali ležeče. Teža prikazuje pisavo kot navadno ali krepko. Težo lahko izrazimo tudi številčno. Velikost je preprosto velikost pisave večja je velikost, večje je besedilo na videz. Velikost pisave je mogoče določiti na več načinov, podrobni opisi so podani v kasnejših razdelkih. Družinski atribut je besedilu dodeliti ime pisave.

V primeru 1 smo za naslove in odstavke uporabili različna imena pisav. Pod oznakama h1 in p sta navedeni dve imeni pisav, medtem ko oznaka h2 imenuje samo eno pisavo. To je definicija družine pisav, več o tem kasneje.

Nadaljujemo s tem člankom o Pisave v CSS

atribut sloga pisave:

Primarna sloga lahko nastavite tako, da sta običajna in ležeča. Ležeče pisave naj bi bile kurzivne narave s poševnico. Normal je privzeta možnost, ki je naravnost. Obstaja še ena manj uporabljena možnost, imenovana 'poševno', ki je v večini pisav podobna ležeči. Slog lahko nastavite tudi na „dedovanje“, tako da prevzame slog pisave iz nadrejenega elementa.

Nadaljujemo s tem člankom o Pisave v CSS

atribut teže pisave:

Ta atribut odloča, ali naj bo pisava debela ali tanka. Nastavite ga lahko na »normalno« ali »krepko«. Privzeta vrednost je normalna. To vrednost lahko nastavite tudi kot številčno. Teža 400 predstavlja normalno, 700 pa krepko. Obstaja malo drugih nastavitev (od 100 - zelo lahka do 900 - zelo krepka), vendar jih ne podpirajo vse pisave. Vse možnosti teže so prikazane v primeru 3.

Nadaljujemo s tem člankom o Pisave v CSS

atribut velikosti pisave:

Atribut velikosti je mogoče nastaviti na več načinov. Spodaj naštejmo te načine.
● Našteta vrednost, na primer 'srednja', 'velika'. Pravzaprav se vrednosti, tako kot velikosti oblačil, lahko gibljejo od XX majhnih do XX velikih!
● Nastavi glede na nadrejeni element kot »večji« ali »manjši«.
● Odstotek velikosti nadrejenega elementa.
● Nastavi kot 'deduj', če želite neposredno sprejeti velikost nadrejenega elementa.
● Kot absolutna vrednost v enotah px (slikovnih pik), pt (točk) ali cm (centimetrov)
'Srednje' je privzeta vrednost, nastavljena za ta parameter.

Nadaljujemo s tem člankom o Pisave v CSS

atribut družine pisav:

V HTML je družina pisav CSS namenjena nastavitvi imena pisave. Z oznako lahko dodate samo eno ime pisave. Lahko pa dodelite več vrednosti kot seznam družin pisav, ki določa prednost, pri kateri naj brskalnik izbere pisavo.
Seznam ima prednost od leve proti desni v obliki rezervnega sistema. Izbere se prva vrednost, če je na voljo, ali kontrolnik preide na naslednjo, dokler ni dosežen konec seznama. Privzeto družino pisav določajo nastavitve brskalnika.
Družine pisav CSS so dve vrsti - generične družine in družine pisav.
● Generične družine - na podlagi nekaterih splošnih značilnosti so pisave razvrščene v skupine kot „serif“, „sans serif“, „monospace“ itd. Sans serif na primer pomeni pisave brez sloga serifa.
● Družinska imena - pisave, ki pripadajo določenim družinskim hierarhijam. Times, Arial, Courier so vse družine pisav, Times New Roman pa je primer pisave družine Times.
Različne možnosti uporabe družine pisav so navedene v spodnjem primeru 4.

Nekaj ​​pogostih točk

● Tako kot nekatere druge lastnosti CSS se nekatere nastavitve pisave razlikujejo v različnih brskalnikih. Pred uporabo nekaterih redkih nastavitev pisave preverite podporo brskalnika.
● Nastavitve pisave lahko nastavite ločeno z uporabo posameznih oznak sloga pisave, teže pisave itd. Če želite raje kompaktno kodo, lahko uporabite atribut okrajšave pisave z vsemi vrednostmi v isti vrstici.
● V uporabniških scenarijih, kjer želite, da se velikost pisave razlikuje glede na velikost brskalnika, obstaja uporabna nastavitev velikosti pisave, imenovana odzivna nastavitev pisave. Nastavite ga lahko z enoto vw, kar pomeni “širina vidnega polja”. Tako bo velikost besedila sledila velikosti okna brskalnika.

Upam, da ste informacije, ki ste jih iskali, našli v Fonts In CSS. Delite svoje izkušnje z nami v spodnjem oddelku za komentarje. Srečno oblikovanje!

Če vas zanima več o spletnem razvoju, si oglejte avtor Edureka. Izobraževanje za certificiranje spletnega razvoja vam bo pomagalo Naučiti se ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih namestiti v Amazon Simple Storage Service (S3).