Introduksjon til CSS-fontegenskaper
CSS Font Properties gir en oversikt over fontegenskapene til CSS. Cascading Style Sheets, mer populært kjent som CSS, er et enkelt designspråk designet for å gjøre enklere de produserende websidene ser bra ut. CSS tar for seg utseendet og opplever en del av en webside. Ved å bruke CSS, kan du kontrollere fargen med teksten, stilen på skrifter, avstanden mellom avsnitt, hvordan kolonnene blir størrelse, samt presentert, de bakgrunnsbildene eller fargene som brukes, layoutstiler, varianter på skjermen flere enheter i tillegg til skjermstørrelser i tillegg til en rekke forskjellige andre effekter. CSS er enkel å forstå og forstå, men det gir effektiv kontroll over demonstrasjonen av HTML-dokumentet. Oftest er CSS vanligvis kombinert med markeringsspråk HTML eller bare XHTML.
- CSS refererer til Cascading Style Sheets.
- CSS identifiserer hvordan HTML-elementer skal vises på skjerm, papir og også bestå av media.
- CSS vil spare mye arbeid. Det kan kontrollere utformingen av flere nettsider på en gang.
- Eksterne stilark vil bli oppbevart i CSS-filer.
Forklar forskjellige CSS-fontegenskaper
Nedenfor er de forskjellige CSS-fontegenskapene:
Font Collection: I CSS kan du velge skrifttypen du vil bruke for teksten inne i et bestemt element ved å sette font-family-egenskapen i en stilregel, men før vi får inn detaljer om font-family, må vi forstå hvordan vi bruker fontnavn, fordi når vi oppretter en webside, vet vi ikke alltid hva brukeren vår vil bruke for å se websiden.
Definer de fem skriftkategoriene i standard CSS
- Den første av disse kategoriene er kategoriene med serif-skrifter. Et eksempel på en spesifikk font som ville passe inn i denne kategorien, er Times eller Times New Roman samt Baskerville, Century og Schoolbook
- Dette er spesifikke fontnavn, som Baskerville, Century og Schoolbook; dette er skrifttypenavnene du kan se i en rullegardinliste når du velger en font inne i en tekstbehandler, fordi tekstbehandleren vet nøyaktig hva som er installert på maskinen din. Men for CSS ville alle disse skriftene falle under kategorien serif-skrifter.
- Det er også et sett med sans-serif-skrifter, og en populær font som faller i denne kategorien er Arial. I tilfelle du ikke visste det, serif, så det er små streker på slutten av en bokstav, får de bokstavene til å se litt fancy ut og pyntet. Du kan se forskjellen i R-bokstavene nedenfor.
- R til venstre er en Arial, som er sans-serif, bokstavelig talt uten pynten, mens R til høyre er Times New Roman, og den inneholder noen få ekstra små streker her og der. Generelt sett finner folk sans-serif-skrifter lettere å lese på en LCD- og LED-skjerm.
- Det er også kategorier for kursive skrifter, som ser litt ut som håndskrevne bokstaver og fantasifonter, som kan se ut som hva som helst, men de fleste design vil ikke gjøre noe særlig bruk av disse skriftene fordi de kan være vanskelig å lese og også litt uforutsigbar.
- Endelig er det en kategori for ensfargede skrifter. Dette er skrifttypene som gir lik avstand til hver bokstav, og det er sannsynligvis skriften du vil bruke i tekstredigeringsprogrammet du bruker for å lage CSS, og også skriften du vil bruke på en webside for å vise kode i en nettside.
Resultater i nettleseren:
Produksjon:
Resultater i nettleseren:
Produksjon:
Resultater i nettleseren:
Produksjon:
Resultater i nettleseren:
Produksjon:
Resultater i nettleseren:
Produksjon:
Fontfamilier
Under forklaringen viser skriftfamiliene:
- Mange CSS-design vil sette font-familieegenskapen til navnet på en spesifikk font som Arial. Imidlertid er det alltid en sjanse for at den spesifikke skriften du vil ha som Arial, at den ikke er tilgjengelig på en gitt brukers system. Og det er en av grunnene til at du kan spesifisere så mange skrifter du vil i en komma-avgrenset liste, og nettleseren vil bruke den første som samsvarer.
I henhold til skjermbildet ovenfor har vi det første valget, det andre valget, og hvis ingen av disse skrifttypene er tilgjengelige, faller vi tilbake til den generiske sans-serif fordi selv om nettleseren ikke har noen av de andre skriftene den må gi en standard font for den kategorien. Det reiser selvfølgelig spørsmålet om hvilke skrifter som er trygge å bruke til webdesign. Generelt sett kan du ikke gå galt med Arial, Verdana, Times og Courier, men vi har også gitt en liste her over andre skrifter som ofte er tilgjengelige på flere plattformer.
- Helvetica er en vanlig font som du ser oppført i mange stilark, men Helvetica er ikke tilgjengelig på Windows. Windows gir Arial i stedet.
- Font-family er en av de egenskapene som arves. Så hvis vi setter det på kroppsnivå, vil avsnittene og divsene og forankringene som er inne i kroppen, som standard plukke opp fontfamilien med mindre vi overstyrer den. Så for eksempel arver denne overskriften her, denne h1-taggen, fontfamilien fra kroppen, men det trenger ikke å være slik.
Produksjon:
Vi kan si at for h1 skal fontfamilien være Times New Roman, Serif, og hvis du oppdaterer websidene, har endringen reflektert.
Skriftstørrelse og stiler
Under detaljinformasjonen om fontstørrelse og stiler:
- En annen egenskap ved skrifter som du vil kontrollere er størrelsen, og når du angir størrelsen, må du først velge mellom absolutte eller relative enheter.
- Absolutte størrelser er ofte spesifisert i piksler og piksler gir deg veldig presis kontroll over skriftstørrelsen.
- Relative enheter som prosenter eller nøkkelord større eller mindre eller ems, lar deg angi en skriftstørrelse basert på noen grunnlinje, så 2em ville være dobbelt så stor som baseline og 0. 8em ville være 80% av grunnlinjen. Mange bruker i dag ems for relativt størrelse på font. En årsak er at relative størrelser tillater en bruker å skalere opp teksten ved hjelp av nettleseren, og dette er noe de kanskje vil gjøre fordi teksten er vanskelig for dem å se. Relative størrelser lar det virke.
Resultater i nettleseren:
Produksjon:
- Noen av de andre egenskapene til en font som du kan angi, er skrifttypen for å tvinge kursiv skrift eller skriftvekten til å gjøre en skrift fet. Og egenskapen med fontvariant vil bringe inn et skrifttype som bare bruker store bokstaver.
Resultater i nettleseren:
Produksjon:
- Det første vi ønsker å gjøre er å betone det h1-elementet litt. Det må være et h1-element fordi det er den primære overskriften for denne siden, men den er litt for stor for vårt synspunkt. Så la meg sette skriftstørrelsen til 1, 2 em. Det vil redusere det litt fordi vanligvis en h1-kode kommer til å være langt utover 1, 2ems. Neste utgave vi ønsker å ta opp er kodelisten her. Vi ønsker at dette skal være en monospace-font, og det er et par forskjellige ønsker å oppnå dette. For kode i henhold til nedenfor.
Resultater i nettleseren:
Produksjon:
Resultater i nettleseren:
Produksjon:
Her ønsker vi å bruke forhåndsmerke, som betyr at dette er forhåndsformatert tekst og ikke prøv å manipulere den.
Resultater i nettleseren:
Produksjon:
Det er kortsiktige egenskaper for skriftstil. Som skrifttype kursiv, skriftstørrelse 0, 9em og font-familiens serif;
Resultater i nettleseren:
Produksjon:
Konklusjon
Hvordan spesifisere skrifter ved hjelp av CSS og forskjellen mellom en spesifikk font som Arial og de generiske kategoriene av nettfonter som serif og sans-serif. Vi administrerer også fontstørrelse og fordeler og ulemper med relative størrelser kontra absolutte størrelser. Til slutt bruker vi fontegenskaper og lærer å laste inn skrifter med skriftfamilien.
Anbefalte artikler
Dette har vært en guide til CSS Font Properties. Her har vi diskutert Ulike CSS-fontegenskaper og fem skriftkategorier i standarder CSS med nettleserresultater og utganger. kan du også gå gjennom vår andre foreslåtte artikkel for å lære mer-
- Hva er CSS?
- Introduksjon til CSS
- Karriere i CSS
- Fordeler med CSS