Hur man bäst använder teckensnitt i CSS?

Den här artikeln presenterar dig för ett enkelt men ändå ett viktigt ämne som är Typsnitt i och kommer också att ge dig en praktisk demonstration om ämnet. Följande tips kommer att behandlas i den här artikeln,

• Typsnitt i CSS
• Attribut i CSS-teckensnitt
• attribut för typsnitt
• attribut för font-weight
• attribut för fontstorlek
• font-family attribut

Webbplatser innehåller innehåll i form av bilder, ljud, video och textinnehåll. De flesta webbsidor är dock fortfarande beroende av text som det dominerande formatet. Detta beror på att klartext erbjuder några mycket betydande fördelar.

Icke-påträngande läsbarhet - Du vill kontrollera den senaste matchresultatet när du är på kontoret. Uppenbarligen vill du ha en snabb textuppdatering, inte en bullrig video!
Krav på låg nätverksbandbredd - Textinnehåll kan laddas även i dåliga internetanslutningsområden, medan rich media inte kan.
Sökvänlig - Webbplatser håller alltid ett öga på hur lätt deras innehåll märks i sökmotorerna. Text passar bäst för detta, åtminstone tills AI tar helt över internet!

Under formatering av textinnehåll har webbdesigners bara få parametrar att arbeta med - typsnitt, justering, markering och färg. Att välja rätt teckensnitt för din text är ett kritiskt val. Standardpraxis är att använda CSS-typsnittstaggar för att definiera typsnitt för text på HTML-sidor.
Om du är ny i världen av HTML-programmering, få en grundläggande starttur här. Du kanske vill läsa mer om CSS-grunderna innan du börjar lära dig mer om CSS-teckensnitt.

För en omfattande CSS-handledning, besök Edureka CSS Tutorial för nybörjare. Du får ett utmärkt intryck på hur CSS ska användas för att utöka HTML-webbdesign.

Fortsätter med den här artikeln om typsnitt i CSS

Typsnitt i CSS

Ett typsnitt är i grunden en uppsättning egenskaper som är associerade med visning av text. Typsnitt skiljer sig från varandra efter storlek, indragning, bredd, snedställning och så vidare. Låt oss börja med en grundläggande textvisning i olika teckensnitt.

Exempel 1: Rubriker och stycke i olika teckensnitt

mvc-arkitektur i java med exempel

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

 Exempel 1: Output 

I exempel 1 har vi tre olika textrader i olika teckensnitt. Du skulle märka att var och en av teckensnitten varierar i karaktärsbredd, fördjupningar etc.

Fortsätter med den här artikeln om typsnitt i CSS

Attribut i CSS-teckensnitt

CSS-teckensnitt har fyra primära attribut - stil, vikt, storlek och familj. Stilattributet betecknar normal eller kursiv. Tyngden visar teckensnittet som vanligt eller fetstil. Vikt kan också uttryckas numeriskt. Storleken är helt enkelt teckensnittsstorleken större, större texten i utseende. Det finns flera sätt som teckenstorlek kan tilldelas, detaljerade beskrivningar ges i senare avsnitt. Familjeattributet är att tilldela teckensnittsnamnet till texten.

I exempel 1 har vi använt olika teckensnittsnamn för rubrikerna och stycket. Under h1- och p-taggarna ser vi två teckensnittsnamn listade, medan h2-taggen bara namnger ett teckensnitt. Detta är definitionen av en teckensnittsfamilj, mer om detta senare.

Fortsätter med den här artikeln om typsnitt i CSS

font-style attribut:

De två primära stilarna kan ställas in är 'normal' och 'kursiv'. Kursiv är tänkt att vara kursiv i naturen med en snedställning. Normal är standardalternativet som är rakt. Det finns ett annat mindre använt alternativ som kallas 'sneda', som liknar det kursiva alternativet i de flesta teckensnitt. Du kan också ställa in stilen till 'ärva' så att den tar teckensnittsstilen från dess överordnade element.

hur man skriver singleton-klass i java

Fortsätter med den här artikeln om typsnitt i CSS

font-weight attribut:

Detta attribut avgör om teckensnittet ska visas tjockt eller tunt. Den kan ställas in på 'normal' eller 'fet'. Standardvärdet är normalt. Detta värde kan också ställas in som numeriskt. Vikt 400 är normal och 700 är fetstil. Det finns få andra inställningar (allt från 100 - väldigt lätta till 900 - väldigt djärva), men de stöds inte av alla teckensnitt. Alla viktalternativ visas i exempel 3.

Fortsätter med den här artikeln om typsnitt i CSS

attribut för fontstorlek:

Storleksattributet kan ställas in på flera sätt. Låt oss lista ned dessa sätt nedan.
● Räknat värde som ”medium”, ”large”. I själva verket, precis som klädstorlekar, kan värdena variera från XX Small till XX Large!
● Ställ in relativt dess överordnade element, som ”större” eller ”mindre”.
● Procent av moderelementets storlek.
● Ställ in som 'ärva' för att direkt anta storleken på det överordnade elementet.
● Som absolut värde i enheterna px (pixlar), pt (punkter) eller cm (centimeter)
'Medium' är standardvärdet för denna parameter.

Fortsätter med den här artikeln om typsnitt i CSS

font-family attribut:

I HTML är CSS-teckensnittsfamiljen för att ställa in teckensnittsnamnet. Du kan antingen bara ange ett enda typsnittsnamn med taggen. Eller så kan du tilldela flera värden som en teckensnittsfamiljslista som definierar vilken prioritet webbläsaren ska välja teckensnitt för.
Listan prioriteras från vänster till höger, i form av ett reservsystem. Det första värdet, om tillgängligt, väljs, eller kontrollen går till nästa tills listans slut når. Standardteckensnittsfamiljen definieras av webbläsarinställningarna.
CSS-typsnittsfamiljer är av två typer - generiska familjer och typsnittsfamiljer.
● Generiska familjer - baserat på vissa allmänna egenskaper är teckensnitt grupperade som “serif”, “sans serif”, “monospace” etc. Sans serif betyder till exempel typsnitt utan serif-stil.
● Familjenamn - teckensnitt som tillhör specifika familjehierarkier. Times, Arial, Courier är alla teckensnittsfamiljer och Times New Roman är ett teckensnitt för Times-familjen.
De olika användningsalternativen för teckensnittsfamiljer listas i exempel 4 nedan.

vad är typgjutning i java

Några vanliga punkter att notera

● Liksom flera andra CSS-egenskaper varierar vissa av teckensnittsinställningarna i olika webbläsare. Sök efter webbläsarsupport innan du använder några sällsynta typsnitt.
● Du kan ställa in teckensnittsinställningar separat med de enskilda taggarna för typsnitt, teckensnittsvikt osv. Alternativt, om du föredrar kompakt kod, kan du använda attributet stenografi med alla värden på samma rad.
● I användarscenarier där du vill att teckensnittet ska variera i storlek beroende på webbläsarens storlek finns det en användbar inställning för teckenstorlek som kallas responsiv teckensnittsinställning. Den kan ställas in med en vw-enhet, vilket betyder 'visningsbredd'. På så sätt följer textstorleken storleken på webbläsarfönstret.

Hoppas du hittade informationen du letade efter på Fonts In CSS. Dela din erfarenhet med oss ​​i kommentarfältet nedan. Glad design!

Om du är intresserad av att lära dig mer om webbutveckling, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).