Introduktion til CSS-fontegenskaber
CSS-fontegenskaber giver en oversigt over skriftegenskaber for CSS. Cascading Style Sheets, mere populært kendt som CSS, er et let designsprog designet til at gøre det lettere at producere websiderne ser godt ud. CSS beskæftiger sig med udseendet og oplever en del af en webside. Ved anvendelse af CSS er du i stand til at kontrollere farven med teksten, typografien på skrifttyper, afstanden mellem afsnit, hvordan kolonner skal størrelse og præsenteres, de baggrundsbilleder eller farver, der bruges, layoutformater, varianter i display flere enheder samt skærmstørrelser ud over en række forskellige andre effekter. CSS er enkel at forstå samt forstå, men det giver effektiv kontrol med demonstrationen af HTML-dokumentet. Oftest kombineres CSS normalt med markup-sprog HTML eller blot XHTML.
- CSS refererer til Cascading Style Sheets.
- CSS identificerer, hvordan HTML-elementer skal vises på skærm, papir og også består af medier.
- CSS sparer en masse arbejde. Det kunne kontrollere layoutet af flere websider på én gang.
- Eksterne stilark opbevares i CSS-filer.
Forklar forskellige CSS-fontegenskaber
Nedenfor er de forskellige CSS-fontegenskaber:
Font samling: I CSS kan du vælge den skrifttype, du vil bruge til teksten inde i et bestemt element, ved at indstille font-family-egenskaben i en stilregel, men inden vi får detaljer i font-family, skal vi forstå hvordan man bruger fontnavne, fordi når vi opretter en webside, ved vi ikke altid, hvad vores bruger vil bruge til at se websiden.
Definer de fem skrifttypekategorier i standarder CSS
- Den første af disse kategorier er kategorierne af serif-skrifttyper. Et eksempel på en bestemt skrifttype, der ville passe ind i denne kategori, er Times eller Times New Roman samt Baskerville, Century og Schoolbook
- Disse er specifikke fontnavne, som Baskerville, Century og Schoolbook; det er de fontnavne, du muligvis kan se i en rulleliste, når du vælger en skrifttype inde i en tekstbehandler, fordi tekstbehandleren ved nøjagtigt, hvad der er installeret på din maskine. Men til CSS falder alle disse skrifttyper under kategorien serif-skrifttyper.
- Der er også et sæt sans-serif-skrifttyper, og en populær skrifttype, der falder inden for denne kategori, er Arial. I tilfælde af at du ikke vidste, serif, så der er små streger i slutningen af et brev, får de bogstaverne til at se lidt smarte ud og pyntes. Du kan se forskellen i R-bogstaverne nedenfor.
- R til venstre er en Arial, som er sans-serif, bogstaveligt talt uden udsmykninger, mens R til højre er Times New Roman, og den indeholder et par ekstra små streger her og der. Generelt synes folk, at sans-serif-skrifttyper er lettere at læse på et LCD- og LED-display.
- Der er også kategorier for cursive skrifttyper, der ligner lidt håndskrevne breve og fantasifonter, der kan ligne noget som helst, men de fleste designs vil ikke bruge disse skrifttyper kraftigt, fordi de kan være svære at læse og også lidt uforudsigelig.
- Endelig er der en kategori for ensartede skrifttyper. Dette er de skrifttyper, der giver lige stort afstand til hvert bogstav, og det er sandsynligvis den skrifttype, du vil bruge i din teksteditor, som du bruger til at oprette CSS og også den skrifttype, som du gerne vil bruge på en webside til at vise kode i en hjemmeside.
Resultater i webbrowser:
Produktion:
Resultater i webbrowser:
Produktion:
Resultater i webbrowser:
Produktion:
Resultater i webbrowser:
Produktion:
Resultater i webbrowser:
Produktion:
Fontfamilier
Nedenfor forklaringen viser skrifttypefamilierne:
- Mange CSS-design vil indstille font-familie-egenskaben til navnet på en bestemt skrifttype som Arial. Imidlertid er der altid en chance for, at den specifikke skrifttype, du gerne vil lide Arial, at den ikke er tilgængelig på en given brugers system. Og det er en af grundene til, at du kan specificere så mange skrifttyper, som du gerne vil på en kommasepareret liste, og browseren bruger den første, der matcher.
I henhold til ovenstående skærmbillede har vi første valg, et andet valg, og hvis ingen af disse skrifttyper er tilgængelige, falder vi tilbage til det generiske sans-serif, selvom browseren ikke har nogen af de andre skrifttyper, den skal give en standard skrifttype for den kategori. Det rejser naturligvis spørgsmålet om, hvilke skrifttyper der er sikre at bruge til webdesign. Generelt kan du ikke gå galt med Arial, Verdana, Times og Courier, men vi har også leveret en liste her over andre skrifttyper, der ofte er tilgængelige på flere platforme.
- Helvetica er en almindelig skrifttype, som du ser på mange stilark, men Helvetica er ikke tilgængelig på Windows. Windows leverer Arial i stedet.
- Fontfamilie er en af disse egenskaber, der er arvet. Så hvis vi indstiller det på kropsniveau, vil afsnit og divs og ankerne, der er inde i det organ, som standard hente den fontfamilie som standard, medmindre vi tilsidesætter den. Så for eksempel arver dette header her, dette h1-tag, fontfamilien fra kroppen, men det behøver ikke være sådan.
Produktion:
Vi kan sige, at for h1 skal fontfamilien være Times New Roman, Serif, og hvis opdater websiderne har ændringen afspejlet.
Størrelse af skrifttype og stilarter
Nedenfor finder du detaljerede oplysninger om fontstørrelse og stilarter:
- En anden egenskab ved skrifttyper, som du vil kontrollere, er størrelsen, og når du indstiller størrelsen, skal du først vælge mellem absolutte eller relative enheder.
- Absolutte størrelser er ofte specificeret i pixels og pixels giver dig meget præcis kontrol over skriftstørrelsen.
- Relative enheder som procenter eller nøgleordene større eller mindre eller ems, giver dig mulighed for at indstille en skriftstørrelse baseret på en eller anden basislinje, så 2em ville være dobbelt så stor som baseline og 0. 8em ville være 80% af baseline. Mange mennesker i dag bruger ems til relativ fontstørrelse. En af årsagerne er relative størrelser, der giver brugeren mulighed for at opskalere teksten ved hjælp af deres browser, og det er noget, de måske ønsker at gøre, fordi teksten er svært for dem at se. Relative størrelser gør det muligt at arbejde.
Resultater i webbrowser:
Produktion:
- Nogle af de andre egenskaber ved en skrifttype, som du kan indstille, er skrifttypen til at tvinge kursiv skrift eller fontvægten til at gøre en skrifttype fed. Og egenskaben med fontvariant indbringer et skrifttype, der kun bruger store bogstaver.
Resultater i webbrowser:
Produktion:
- Den første ting, vi vil gøre, er at understrege dette h1-element lidt. Det skal være et h1-element, fordi det er det primære header på denne side, men det er lidt for stort til vores synspunkt. Så lad mig indstille fontstørrelsen til 1, 2ems. Det vil nedbringe det lidt, fordi et h1-tag typisk vil være langt over 1, 2ems. Det næste problem, vi ønsker at løse, er kodelisten her. Vi ønsker, at dette skal være en monospace-skrifttype, og der er et par forskellige ønsker at opnå dette. For kode som beskrevet nedenfor.
Resultater i webbrowser:
Produktion:
Resultater i webbrowser:
Produktion:
Her ønsker vi at bruge fortag, hvilket betyder, at dette er en forformateret tekst, og prøv ikke at manipulere den.
Resultater i webbrowser:
Produktion:
Det er kortere egenskaber ved skrifttype. Ligesom skrifttype-kursiv, skriftstørrelse 0, 9em og font-familiens serif;
Resultater i webbrowser:
Produktion:
Konklusion
Sådan specificeres skrifter ved hjælp af CSS og forskellen mellem en bestemt skrifttype som Arial og de generiske kategorier af webfonte som serif og sans-serif. Vi administrerer også fontstørrelse og fordele og ulemper med relative størrelser kontra absolutte størrelser. Endelig bruger vi fontegenskaber og lærer indlæsning af skrifttyper med skrifttypefamilien.
Anbefalede artikler
Dette har været en guide til CSS-fontegenskaber. Her har vi drøftet forskellige CSS-fontegenskaber og fem skrifttypekategorier i standard CSS med browserresultater og output. Du kan også gennemgå vores andre foreslåede artikel for at lære mere-
- Hvad er CSS?
- Introduktion til CSS
- Karriere i CSS
- Fordele ved CSS