De eigenschap CSS font-size stelt de lettergrootte in van elk tekstelement op uw pagina of website. De eigenschap Lettergrootte kan worden toegepast op elke klasse, ID of element dat tekstinhoud bevat. De eigenschap accepteert waarden ‚Äã‚Äãin px, em, rem, vw, vh en het gebruik van trefwoorden.
De meeste ontwikkelaars gebruiken een combinatie van verschillende lettergroottes voor het opmaken van een webpagina. Een webontwikkelaar kan bijvoorbeeld een groot lettertype gebruiken voor koppen en een kleiner lettertype voor hoofdtekst en andere. Velen vragen zich af: hoe de lettergrootte in CSS of HTML te veranderen
CSS lettergrootte ? staat ontwikkelaars toe om de lettergrootte in een alinea of regel tekst op een webpagina in te stellen.
In deze zelfstudie wordt aan de hand van voorbeelden besproken hoe u de eigenschappen van de lettergrootte gebruikt. Door deze handleiding te volgen, bent u een expert in het wijzigen van de tekstgrootte.
CSS Tekstgrootte
De juiste letterstijl is een belangrijk onderdeel van webdesign. Tekst zonder stijl veroorzaakt leesproblemen voor bezoekers, wat vrijwel zeker resulteert in een onaangename ervaring op de site.
Er zijn veel CSS-stijlen voor lettertypen die kunnen worden gebruikt om de weergavetekst aan te passen, zoals font-weight , font-family, decoratietekst en kleur . Een andere belangrijke eigenschap is de lettergrootte , die de grootte van een lettertype in een tekstblok regelt
De syntaxis van de grootte van het lettertype CSS is als volgt:
sizeValue is de grootte van het lettertype dat u voor een tekstblok wilt gebruiken. Er zijn verschillende manieren om de grootte van het lettertype dat door een blok wordt gebruikt te specificeren. tekst De methoden die we in dit artikel zullen bespreken zijn:
pixels
em
root em
weergave-eenheid
trefwoorden
Laten we een voorbeeld bekijken van hoe elke benadering van lettergrootte in een webpagina kan worden gebruikt.
De lettergrootte aanpassen met pixels
Een van de de meest gebruikelijke manieren om de grootte van een teken in te stellen, is door pixels te gebruiken.
Pixels zijn een goede maateenheid omdat je daarmee nauwkeurig kunt zijn. De pixeleenheid wordt grotendeels beïnvloed door besturingssystemen of webbrowsers. Een pixel op het ene scherm is een pixel op het andere. De opgegeven pixelwaarde lijkt min of meer hetzelfde in verschillende browsers
Het gebruik van pixels om de grootte van een lettertype in een tekstblok in te stellen is echter een limiet:. Toegankelijkheid. De pixellettergroottes die zijn ingesteld met de help zijn niet toegankelijk omdat sommige browsers gebruikers niet toestaan de lettergrootte aan te passen. Gebruikers met een visuele beperking kunnen het bijvoorbeeld moeilijk vinden om een site te gebruiken die pixels gebruikt om de tekengrootte in te stellen
Stel dat we een website met een lettergrootte van 28px voor alle en 12px elementen voor alle We zou hiervoor de volgende code kunnen gebruiken.
In onze code gebruikten we een sets CSS-selector de lettergrootte van alle
28px en alle 12px. Het volgende fragment laat zien hoe deze elementen eruit zien in onze nieuwe lettergroottes: p>>
Klik
Een andere veelgebruikte manier om een lettergrootte in CSS in te stellen, is door em-afmetingen te gebruiken. De maateenheid em verwijst naar de lettergrootte van een ouder. Als u définiss Voer een lettergrootte van 2em in , de lettergrootte zal twee keer zo groot zijn als die van het bovenliggende element.
Een voorbeeld van het schalen van CSS-lettertypen met ems
Stel bijvoorbeeld dat u een alinea met tekst hebt opgeslagen in een vak. De lettergrootte van het vak is 20px. Als u hebt opgegeven dat de lettergrootte van de tekstparagraaf 1em is, is de lettergrootte van de alinea 20px . Het is gelijk aan de lettergrootte van het bovenliggende element.
Als u geen lettergrootte voor een bovenliggend element heeft ingesteld, gebruikt de browser de standaardwaarde die voor die browser is opgegeven. Het is meestal 16px. Als u daarom de grootte van het lettertype niet hebt opgegeven, 1em def ault 16px 2em standaard 32px .
Stel dat de lettergrootte van onze webpagina 16px. We willen dat alle tekstparagrafen met deze lettergrootte verschijnen, wat betekent dat we de waarde 1em moeten gebruiken. Bovendien willen we dat al onze hoofden verschijnen met een lettergrootte van 24px, wat gelijk is aan 1.5em.
We zouden het volgende kunnen gebruiken code om dit te doen:
In onze code is de grootte van alle alinea`s 16px (1em = 16px van standaard) en alle -elementen zijn 24px (1.5em = 24px).
Dit is hoe onze tekst eruit zou zien op de webpagina:
Nell "voorbeeld hierboven, u kunt de nieuwe stijlen zien voor zowel onze < h1> en
Je zou moeten opmerken dat als onze in een doos met een andere lettergrootte, de grootte van onze zou veranderen. Dit komt omdat em-waarden ‚Äã‚Äãhun lettergrootte overnemen van de ouders.
Definieer de lettergrootte met Root em
Rechtbank em, rem is een nieuwe maateenheid geïntroduceerd in CSS3 die kan worden gebruikt om de lettergrootte in te stellen. De waarden met behulp van rem zijn gekoppeld aan het hoofdelement , in plaats van aan het bovenliggende element.
-waarden ‚Äã‚Äãzijn handig omdat u hiermee specificeer een waarde ten opzichte van het hele document. Op deze manier wordt de tekstgrootte niet beïnvloed als het bovenliggende element een andere waarde heeft em
Stel dat je een webpagina hebt met de standaard lettergrootte van 16px. Net als in ons vorige voorbeeld, willen we allemaal dat verschijnt in 24px en dat alle alinea`s in 16px verschijnen. We zouden deze lettergroottes kunnen definiëren met de volgende code:
Onze code is bijna hetzelfde als ons vorige voorbeeld. Het enige verschil is dat de gebruikseenheid voor ons rem is in plaats van em. In dit voorbeeld zijn onze lettergroottes altijd 24px en 16px voor respectievelijk koppen en alinea`s op het hoogste niveau. Dit komt omdat onze standaardlettergrootte voor webpagina`s 16px is.
Stel de grootte van het lettertype in met woorden - sleutel
Er zijn twee soorten sleutels woorden die u kunt gebruiken om de grootte van een lettertype in CSS te definiëren.
Absolute trefwoorden worden gebruikt om een lettergrootte te definiëren die hetzelfde blijft, ongeacht wijzigingen aan de webpagina. De trefwoorden die u kunt gebruiken om een absolute lettergrootte te definiëren zijn:
xx-small (9px)
X-small (10px)
klein (13px)
gemiddeld (16px)
groot (18px)
x-groot (24px)
xx-groot (32px)
Waarden ‚Äã‚Äãtussen haakjes zijn gebaseerd op een browser waarvan de standaardlettergrootte 16px is.
Relatieve zoekwoorden daarentegen , definieert een lettergrootte die zal veranderen op basis van de lettergrootte elders op de webpagina. De relatieve trefwoorden die u kunt gebruiken zijn: kleinste en grootste. Deze trefwoorden zijn handig omdat u hiermee de grootte van uw lettertypen kunt wijzigen wanneer andere lettergroottes op de pagina veranderen
Stel dat we de grootte van alle
op een pagina willen instellen op 24px (x-groot) en allemaal
;
op 18px (groot). We zouden het kunnen doen met deze code:
Klik. "height =" 24 "class =" wp-image-13930 "style =" width: 24px; "src =" https://744025.smushcdn.com / 1245953 / wp-content / uploads / 2020/03 / iconfinder_play-circle- outline_326584.png? lossy = 1 & band = 1 & webp = 1 "alt =" Afbeelding de sleutel " uitvoeringscode ", een driehoek in een cirkel "srcset =" https://744025.smushcdn.com/1245953/wp-content/ uploads / 2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy= 1 & strip = 1 & webp = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03 / iconfinder_play -circle outline_326584.p ng? Lossy = 1 & strip = 1 & webp = 1 24w "maat =". (max -breedte: 24px) 100vw, 24px "> knop in de bovenstaande editorcode om de uitvoer van onze HTML / CSS te zien
De tekengrootte voor onze en zijn respectievelijk 24px en 18px. We hebben deze echter niet gespecificeerd afmetingen met behulp van pixels. In plaats daarvan hebben we de woorden - toetsen gebruikt voor de lettergrootte die standaard door de browser wordt aangeboden.
Stel de lettergrootte in met weergave-eenheden
Weergave-eenheden worden berekend als een percentage van de grootte van het browservenster De twee weergave-eenheden die door CSS worden ondersteund, zijn: weergavehoogte (vh) en weergavebreedte (vw)
Aangezien de weergave-eenheden zijn een percentage van de browservenstergrootte, 1VH is bijvoorbeeld gelijk aan 1% van de vensterhoogte, dus als u een groot 1000px-venster heeft, 1VH is gelijk aan 10px.
Het is handig om venstereenheden te gebruiken omdat uw lettergrootte verandert wanneer u het formaat van uw browservenster wijzigt. er een meer toegankelijke gebruikerservaring, aanpasbaar aan browsers en apparaten van verschillende groottes.
Stel dat u een site wilt maken waarvan de kopteksten 4% van de vensterbreedte zijn. En waarvan de punten 1% van de breedte van het zichtbare gebied zijn. We zouden het met deze code kunnen doen:
Klik op de
Als u het formaat van uw browser wijzigt, verandert de grootte van deze koppen.
Conclusie
de eigenschap lettergrootte wordt gebruikt in CSS (en dus HTML) om de lettergrootte te wijzigen. accepteert een aantal meeteenheden waarin u de grootte van lettertypen kunt zien, inclusief pixels, ems, rems, trefwoorden en weergave-eenheden. Het kan worden toegepast op CSS en ID`s , evenals op de elementen zelf.
Deze tutorial toonde de basisprincipes van CSS-lettergrootte. U bent nu klaar om het kenmerk lettergrootte als een expert te gaan gebruiken.
Shop
Learn programming in R: courses
$
Best Python online courses for 2022
$
Best laptop for Fortnite
$
Best laptop for Excel
$
Best laptop for Solidworks
$
Best laptop for Roblox
$
Best computer for crypto mining
$
Best laptop for Sims 4
$
Latest questions
NUMPYNUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPYNUMPY
How to convert Nonetype to int or string?
12 answers
NUMPYNUMPY
How to specify multiple return types using type-hints
12 answers
NUMPYNUMPY
Javascript Error: IPython is not defined in JupyterLab
