Hoe lettertypen in CSS het beste te gebruiken?



Dit artikel laat je kennismaken met een eenvoudig maar belangrijk onderwerp, namelijk Lettertypen in CSS, en geeft je ook een praktische demonstratie over het onderwerp.

Dit artikel laat je kennismaken met een eenvoudig maar belangrijk onderwerp, namelijk Fonts In en geeft u ook een praktische demonstratie over het onderwerp. De volgende tips komen in dit artikel aan bod:

Websites bevatten inhoud in de vorm van afbeeldingen, audio, video en tekstuele inhoud. De meeste webpagina's vertrouwen echter nog steeds op tekst als het overheersende formaat. Dit komt doordat platte tekst enkele zeer belangrijke voordelen biedt.





Niet-opdringerige leesbaarheid - U wilt op kantoor de laatste wedstrijdscore bekijken. Je wilt natuurlijk een snelle tekstupdate, geen luidruchtige video!
Vereiste voor lage netwerkbandbreedte - Tekstinhoud kan zelfs in gebieden met slechte internetverbindingen worden geladen, terwijl rich media dat niet kan.
Zoekvriendelijk - websites houden altijd in de gaten hoe gemakkelijk hun inhoud wordt opgemerkt in zoekmachines. Tekst is hiervoor het meest geschikt, in ieder geval totdat AI het internet volledig overneemt!

Bij het opmaken van tekstinhoud hebben webontwerpers maar een paar parameters om aan te werken: lettertype, uitlijning, markering en kleur. Het selecteren van het juiste lettertype voor uw tekst is een cruciale keuze. De standaardpraktijk is om CSS-lettertypetags te gebruiken om lettertypen voor tekst in HTML-pagina's te definiëren.
Als je nieuw bent in de wereld van HTML-programmeren, kun je hier een basisrondleiding voor beginners krijgen. Misschien wil je eerst de CSS-basisprincipes lezen voordat je verder gaat met het leren over CSS-lettertypen.



Bezoek Edureka CSS Tutorial For Beginners voor een uitgebreide CSS-tutorial. U krijgt een uitstekende uitleg over de manier waarop CSS moet worden gebruikt om HTML-webontwerp te verbeteren.

Verderop met dit artikel over lettertypen in CSS

Lettertypen in CSS

Een lettertype is in feite een set kenmerken die verband houden met de weergave van tekst. Lettertypen onderscheiden zich van elkaar door hun grootte, inspringing, breedte, helling enzovoort. Laten we beginnen met een eenvoudige tekstweergave in verschillende lettertypen.



Voorbeeld 1: Koppen en alinea's in verschillende lettertypen

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

De alinea in cursief en vet Georgia-lettertype

 Voorbeeld 1: uitvoer 

Uitvoer - Lettertype in CSS - Edureka

In Voorbeeld 1 hebben we 3 verschillende regels tekst in verschillende lettertypen. U zou opmerken dat elk van de lettertypen varieert in tekenbreedte, inspringingen, enz.

Verderop met dit artikel over lettertypen in CSS

Attributen in CSS-lettertype

CSS-lettertypen hebben 4 primaire kenmerken: stijl, gewicht, grootte en familie. Het style-attribuut geeft normaal of cursief aan. Het gewicht toont het lettertype als gewoon of vetgedrukt. Gewicht kan ook numeriek worden uitgedrukt. De grootte is gewoon de lettergrootte, groter dan de grootte, hoe groter het uiterlijk van de tekst. Er zijn meerdere manieren waarop de lettergrootte kan worden toegewezen, gedetailleerde beschrijvingen worden in latere secties gegeven. Het familiekenmerk is om de lettertypenaam aan de tekst toe te wijzen.

c ++ sorteermethode

In Voorbeeld 1 hebben we verschillende lettertypenamen gebruikt voor de koppen en alinea's. Onder de tags h1 en p zien we twee lettertypenamen, terwijl de tag h2 slechts één lettertype noemt. Dit is de definitie van een lettertypefamilie, hierover later meer.

Verderop met dit artikel over lettertypen in CSS

font-style attribuut:

De twee primaire stijlen die kunnen worden ingesteld, zijn ‘normaal’ en ‘cursief’. Cursief wordt verondersteld cursief van aard te zijn met een helling. Normaal is de standaardoptie die recht is. Er is nog een minder gebruikte optie genaamd ‘schuin’, die in de meeste lettertypen lijkt op de optie cursief. U kunt de stijl ook instellen op ‘erven’, zodat deze de lettertypestijl uit het bovenliggende element haalt.

Voorbeeld 2: opties voor lettertypestijlen
font-family: verdana

font-style: normaal

lettergrootte: 15

Verdana normaal lettertype
font-family: verdana

font-style: cursief

lettergrootte: 15

Verdana cursief lettertype
font-family: verdana

font-style: schuin

lettergrootte: 15

Verdana schuin lettertype

Verderop met dit artikel over lettertypen in CSS

font-weight attribuut:

Dit kenmerk bepaalt of het lettertype dik of dun moet lijken. Het kan worden ingesteld op ‘normaal’ of ‘vetgedrukt’. De standaardwaarde is normaal. Deze waarde kan ook als numeriek worden ingesteld. Gewicht van 400 staat voor normaal en 700 is voor vet. Er zijn enkele andere instellingen (variërend van 100 - heel licht tot 900 - heel vet), maar deze worden niet door alle lettertypen ondersteund. Alle gewichtsopties worden getoond in Voorbeeld 3.

Voorbeeld 3: opties voor lettertypegewicht
font-family: verdana

font-weight: normaal

lettergrootte: 15

Verdana normaal gewicht
font-family: verdana

font-weight: vet

lettergrootte: 15

Verdana vet gewicht
font-family: verdana

hoe u toegang krijgt tot aws cli

lettertype-gewicht: 500

lettergrootte: 15

Verdana numeriek gewicht

Verderop met dit artikel over lettertypen in CSS

font-size kenmerk:

Het maatattribuut kan op meerdere manieren worden ingesteld. Laten we deze manieren hieronder opsommen.
● Opgesomde waarde zoals ‘gemiddeld’, ‘groot’. In feite kunnen de waarden, net als kledingmaten, variëren van XX Small tot XX Large!
● Stel relatief ten opzichte van het bovenliggende element in als ‘groter’ of ‘kleiner’.
● Percentage van de grootte van het bovenliggende element.
● Stel in als ‘erven’ om de grootte van het bovenliggende element direct over te nemen.
● Als absolute waarde in de eenheden px (pixels), pt (punten) of cm (centimeter)
‘Medium’ is de standaardwaarde die is ingesteld voor deze parameter.

Verderop met dit artikel over lettertypen in CSS

font-family attribuut:

In HTML is de CSS-lettertypefamilie bedoeld om de lettertypenaam in te stellen. U kunt ofwel een enkele lettertypenaam bij de tag plaatsen. Of u kunt meerdere waarden toewijzen als een lettertypefamilielijst die de prioriteit definieert waarin de browser het lettertype moet kiezen.
De lijst krijgt van links naar rechts prioriteit, in de vorm van een fall-back-systeem. De eerste waarde, indien beschikbaar, wordt gekozen, of de besturing gaat naar de volgende, totdat het einde van de lijst is bereikt. De standaardlettertypefamilie wordt bepaald door de browservoorkeuren.
Er zijn twee typen CSS-lettertypefamilies: generieke families en lettertypefamilies.
● Generieke families - gebaseerd op een aantal algemene kenmerken, worden lettertypen gegroepeerd als ‘serif’, ‘sans serif’, ‘monospace’, enz. Sans serif betekent bijvoorbeeld lettertypen zonder de serif-stijl.
● Familienamen - lettertypen die tot specifieke familiehiërarchieën behoren. Times, Arial, Courier zijn allemaal lettertypefamilies en Times New Roman is een voorbeeldlettertype van de Times-familie.
De verschillende gebruiksopties voor lettertypefamilies worden in Voorbeeld 4 hieronder vermeld.

Voorbeeld 4: opties voor lettertypefamilies
font-family: verdanaVerdana enkel lettertype
font-family: 'Times New Roman', Times, CourierTimes New Roman gevolgd door lettertypefamilies
font-family: Arial, minivan, sans-serifArial gevolgd door generieke families

Enkele veel voorkomende punten om op te merken

● Net als bij verschillende andere CSS-eigenschappen, variëren sommige lettertype-instellingen per browser. Controleer op browserondersteuning voordat u enkele zeldzame lettertype-instellingen gebruikt.
● U kunt lettertype-instellingen afzonderlijk instellen met behulp van de afzonderlijke tags lettertype-stijl, lettertype-gewicht, enz. Als u de voorkeur geeft aan compacte code, kunt u het kenmerk steno lettertype gebruiken met alle waarden op dezelfde regel.
● In gebruikersscenario's waarin u wilt dat het lettertype varieert in grootte afhankelijk van de browsergrootte, is er een handige instelling voor de tekengrootte, de zogenaamde responsieve lettertype-instelling. Het kan worden ingesteld met een vw-eenheid, wat 'viewport width' betekent. Op die manier volgt de tekstgrootte de grootte van het browservenster.

Ik hoop dat je de informatie die je zocht hebt gevonden op Fonts In CSS. Deel uw ervaring met ons in de opmerkingen hieronder. Veel plezier met ontwerpen!

Als je meer wilt weten over webontwikkeling, bekijk dan het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).