Kaip geriausiai panaudoti šriftus CSS?

Šis straipsnis supažindins jus su paprasta, tačiau svarbia tema, šriftu CSS, ir taip pat pateiks jums praktinę demonstraciją šia tema.

Šis straipsnis supažindins jus su paprasta, tačiau svarbia tema, šriftais ir taip pat pateiks jums praktinę demonstraciją šia tema. Tolimesni patarimai bus aptarti šiame straipsnyje,



Svetainėse turinys pateikiamas vaizdų, garso, vaizdo ir tekstinio turinio pavidalu. Tačiau dauguma tinklalapių vis dar remiasi tekstu kaip vyraujančiu formatu. Taip yra todėl, kad paprastas tekstas teikia keletą labai reikšmingų pranašumų.



Neįkyrus įskaitomumas - norėdami patikrinti naujausius rungtynių rezultatus būdami biure. Akivaizdu, kad norite greitai atnaujinti tekstą, o ne triukšmingą vaizdo įrašą!
Mažas tinklo pralaidumo reikalavimas - teksto turinį galima įkelti net ir prastose interneto ryšio srityse, o raiškiosios terpės - ne.
Draugiška paieška - interneto svetainės visada stebi, kaip lengvai jų turinys pastebimas paieškos sistemose. Tam geriausiai tinka tekstas, bent jau tol, kol dirbtinis intelektas visiškai perims internetą!

Formatuodami teksto turinį, interneto dizaineriai turi tik keletą parametrų - šrifto, lygiavimo, paryškinimo ir spalvos. Tinkamo teksto šrifto pasirinkimas yra labai svarbus pasirinkimas. Standartinė praktika yra naudoti CSS šriftų žymes, norint apibrėžti šriftus tekstui HTML puslapiuose.
Jei esate naujokas HTML programavimo pasaulyje, čia rasite pagrindinę pradžios apžvalgą. Prieš pradėdami mokytis apie CSS šriftus, galite perskaityti CSS pagrindus.



Norėdami gauti išsamią CSS mokymo programą, apsilankykite „Edureka CSS“ pamokoje pradedantiesiems. Jūs gausite puikų susimąstymą apie tai, kaip CSS turi būti naudojama HTML web dizainui išplėsti.

Toliau su šiuo straipsniu apie šriftus CSS

Šriftai CSS

Šriftas iš esmės yra savybių, susijusių su teksto atvaizdavimu, rinkinys. Šriftai skiriasi nuo jų dydžio, įtraukos, pločio, nuožulnaus ir pan. Pradėkime nuo pagrindinio teksto pateikimo skirtingais šriftais.



1 pavyzdys: antraštės ir pastraipos įvairiais šriftais

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

Pastraipa paryškintu paryškintu Džordžijos šriftu

 1 pavyzdys: Rezultatas 

Išvestis - šriftas CSS - „Edureka“

1 pavyzdyje mes turime 3 skirtingas teksto eilutes skirtingais šriftais. Jūs pastebėtumėte, kad kiekvienas šriftas skiriasi savo simbolių pločiais, įtraukomis ir kt.

Toliau su šiuo straipsniu apie šriftus CSS

Atributai CSS šriftu

CSS šriftai turi 4 pagrindinius atributus - stilių, svorį, dydį ir šeimą. Stiliaus atributas žymi įprastą arba kursyvą. Svoris rodo šriftą kaip paprastą arba paryškintą. Svoris taip pat gali būti išreikštas skaičiais. Dydis yra tiesiog šrifto dydis, didesnis dydis, didesnis teksto išvaizda. Yra keli būdai, kuriais galima priskirti šrifto dydį, išsamūs aprašymai pateikiami vėlesniuose skyriuose. Šeimos atributas yra priskirti šrifto pavadinimą tekstui.

1 pavyzdyje antraštėms ir pastraipoms naudojome skirtingus šriftų pavadinimus. Po žymėmis h1 ir p matome du šriftų pavadinimus, o h2 žymi tik vieną šriftą. Tai yra šriftų šeimos apibrėžimas, apie tai plačiau vėliau.

Toliau su šiuo straipsniu apie šriftus CSS

šrifto stiliaus atributas:

Galima nustatyti du pagrindinius stilius: „įprastas“ ir „kursyvas“. Manoma, kad kursyvas yra kreivojo pobūdžio. Normalus yra numatytasis variantas, kuris yra tiesus. Yra dar viena mažiau naudojama parinktis, vadinama „įstriža“, kuri daugumoje šriftų yra panaši į kursyvą. Taip pat galite nustatyti stilių „paveldėti“, kad šrifto stilius būtų paimtas iš pirminio elemento.

2 pavyzdys: šrifto stiliaus parinktys
šriftų šeima: verdana

šrifto stilius: įprastas

šrifto dydis: 15

„Verdana“ normalus šriftas
šriftų šeima: verdana

šrifto stilius: kursyvas

šrifto dydis: 15

„Verdana“ kursyvinis šriftas
šriftų šeima: verdana

šrifto stilius: įstrižas

šrifto dydis: 15

„Verdana“ įstrižas šriftas

Toliau su šiuo straipsniu apie šriftus CSS

šrifto svorio atributas:

Šis atributas nusprendžia, ar šriftas turi būti storas, ar plonas. Ją galima nustatyti į „įprastą“ arba „paryškintą“. Numatytoji vertė yra normali. Ši vertė taip pat gali būti nustatyta kaip skaitinė. 400 svoris yra normalus, o 700 - paryškintas. Yra keletas kitų nustatymų (nuo 100 - labai lengvas iki 900 - labai paryškintas), tačiau jų palaiko ne visi šriftai. Visi svorio variantai parodyti 3 pavyzdyje.

3 pavyzdys: šrifto svorio parinktys
šriftų šeima: verdana

šrifto svoris: normalus

šrifto dydis: 15

Verdana normalus svoris
šriftų šeima: verdana

šrifto svoris: paryškintas

šrifto dydis: 15

Verdana drąsus svoris
šriftų šeima: verdana

šrifto svoris: 500

šrifto dydis: 15

„Verdana“ skaitinis svoris

Toliau su šiuo straipsniu apie šriftus CSS

šrifto dydžio atributas:

Dydžio atributą galima nustatyti keliais būdais. Žemiau išvardinkime šiuos būdus.
● Surašyta vertė, pvz., „Vidutinė“, „didelė“. Iš tikrųjų, kaip ir drabužių dydžiai, vertės gali svyruoti nuo XX Small iki XX Large!
● Nustatykite, palyginti su pagrindiniu elementu, „didesnis“ arba „mažesnis“.
● Pagrindinio elemento dydžio procentinė dalis.
● Nustatykite kaip „paveldėti“, kad tiesiogiai pritaikytumėte pagrindinio elemento dydį.
● Kaip absoliuti vertė pikselių (pikselių), pt (taškų) arba cm (centimetrų) vienetais
„Medium“ yra numatytoji šio parametro vertė.

Toliau su šiuo straipsniu apie šriftus CSS

šrifto šeimos atributas:

HTML, CSS šriftų šeima skirta šrifto pavadinimui nustatyti. Arba galite tiesiog pridėti vieną šrifto pavadinimą su žyma. Arba galite priskirti kelias reikšmes kaip šriftų šeimos sąrašą, apibrėžiantį prioritetą, kuriuo naršyklė turėtų pasirinkti šriftą.
Sąrašas prioritetinis iš kairės į dešinę, atsarginės sistemos pavidalu. Pasirenkama pirmoji vertė, jei ji yra, arba valdiklis pereina prie kitos, kol bus pasiektas sąrašo galas. Numatytąją šriftų grupę apibrėžia naršyklės nuostatos.
CSS šriftų šeimos yra dviejų tipų - bendros šeimos ir šriftų šeimos.
● Bendros šeimos - remiantis kai kuriomis bendromis savybėmis, šriftai grupuojami kaip „serif“, „sans serif“, „monospace“ ir kt. Pavyzdžiui, „Sans serif“ reiškia šriftus be serif stiliaus.
● Šeimos vardai - šriftai, priklausantys konkrečioms šeimos hierarchijoms. „Times“, „Arial“, „Courier“ yra visos šriftų šeimos, o „Times New Roman“ yra „Times“ šeimos šrifto pavyzdys.
Įvairios šriftų šeimos naudojimo parinktys išvardytos toliau pateiktame 4 pavyzdyje.

vaizdinės studijos pamokos pradedantiesiems
4 pavyzdys: šriftų šeimos parinktys
šriftų šeima: verdana„Verdana“ vienas šriftas
šriftų šeima: „Times New Roman“, „Times“, „Courier“„Times New Roman“, po jo - šriftų šeimos
šriftų šeima: Arialas, minivenas, sans-serifasArialas, paskui generines šeimas

Keletas bendrų dalykų, kuriuos reikia atkreipti dėmesį

● Kaip ir kelios kitos CSS ypatybės, kai kurie šriftų nustatymai skiriasi skirtingose ​​naršyklėse. Prieš naudodami retus šrifto nustatymus, patikrinkite, ar palaikoma naršyklė.
● Šrifto parametrus galite nustatyti atskirai, naudodami atskiras šrifto stiliaus, šrifto svorio ir kt. Žymas. Arba, jei norite kompaktiško kodo, galite naudoti trumpinio šrifto atributą su visomis vertėmis toje pačioje eilutėje.
● Naudotojo scenarijuose, kai norite, kad šrifto dydis skirtųsi atsižvelgiant į naršyklės dydį, yra naudingas šrifto dydžio nustatymas, vadinamas „reaguojančio šrifto nustatymu“. Jį galima nustatyti naudojant „vw“ vienetą, o tai reiškia „peržiūros srities plotis“. Tokiu būdu teksto dydis atitiks naršyklės lango dydį.

Tikimės, kad radote informaciją, kurios ieškojote šriftuose CSS. Pasidalykite savo patirtimi su mumis toliau pateiktame komentarų skyriuje. Laimingo dizaino!

Jei norite sužinoti daugiau apie interneto kūrimą, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės jums sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir pritaikyti ją „Amazon Simple Storage Service“ (S3).