De lettertype dikte eigenschap in CSS wordt gebruikt om het gewicht of de dikte van het lettertype in te stellen. Het specificeert hoe dun of dik de tekens in een tekst zijn. De lettertype dikte eigenschap is afhankelijk van de door de browser opgegeven gewichten of van de beschikbare lettertypes in een lettertypefamilie. Deze CSS-eigenschap definieert dunne tot dikke tekens.
Het accepteert de vooraf gedefinieerde numerieke waarde of trefwoordwaarden. De beschikbare trefwoorden die we bij deze woning kunnen gebruiken zijn normaal, vet, lichter en krachtiger . De numerieke waarde kan 100, 200, 300, .........,tot 900 zijn. De hogere numerieke waarde vertegenwoordigt het vettere lettertype dan de lagere numerieke waarden.
Syntaxis
font-weight: normal | bold | bolder | lighter | number | initial | inherit;
De nummer in de bovenstaande syntaxis vertegenwoordigt de numerieke waarden. De numerieke waarde 400 is hetzelfde als de zoekwoordwaarde normaal en de waarde 700 is hetzelfde als de zoekwoordwaarde vetgedrukt .
De normaal strong> waarde definieert de normale karakters, en de vetgedrukt waarde specificeert de dikke tekens. De brutaler waarde vertegenwoordigt het vetgedrukte lettertype, en de aansteker waarde vertegenwoordigt het lichtere lettertype dan het gewicht dat is geërfd van de ouder.
Laten we eens kijken hoe u tekst in CSS vetgedrukt kunt maken met behulp van een illustratie.
lijstknooppunt
Invoering
CSS staat bekend als een krachtig hulpmiddel voor de ontwikkeling van de webpagina. Met behulp hiervan kunnen we de HTML-inhoud op zoveel manieren vormgeven. Een van de meest voorkomende eigenschappen van het opmaken van de webpagina is het gebruik van een font-weight-eigenschap. Met behulp van vetgedrukte tekst kunnen we de belangrijkste informatie en het visuele contrast benadrukken, en het verbetert ook de leesbaarheid van de inhoud.
Eigenschap van lettertype-gewicht begrijpen
In CSS is er een Font-Weight-eigenschap, die wordt gebruikt om het gewicht of de dikte van het lettertype te definiëren. Het bepaalt ook de mate van vetheid of lichtheid van de tekst, waarbij het accepteren van de hogere waarde een vetter lettertype aangeeft. De eigenschap font-weight accepteert verschillende waarden, zoals numerieke waarden en trefwoordwaarden.
Het bereik van numerieke waarden ligt tussen 100 en 900, met stappen van 100. Als we bijvoorbeeld de waarde van het lettertype op 400 zetten, is dit normaal, terwijl een waarde van 700 als vet wordt beschouwd. Vet, krachtiger, lichter en enkele veelgebruikte zoekwoordwaarden.
Hoe vetgedrukte tekst te maken met CSS
Met behulp van CSS kunnen we de vetgedrukte tekst in HTML maken. We kunnen inline, interne of externe lettertypestijleigenschappen gebruiken.
1. Hoe we vetgedrukte tekst kunnen maken met inline styling
Met behulp van inline styling kunnen we de eigenschap font-weight rechtstreeks op een specifiek HTML-element gebruiken. Laten we een voorbeeld nemen.
abs c-code
HTML code:
machinetaal
Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p>
Uitvoer
Uitleg:
In de bovenstaande code hebben we de inline CSS gebruikt en de eigenschap font-weight vetgedrukt toegepast.
2. Hoe we vetgedrukte tekst kunnen maken met interne styling
Hier moeten we de CSS-eigenschap in de head-tag schrijven met de style-tag. Laten we een voorbeeld nemen:
HTML code:
Document p { font-weight: bold; } <p>Welcome to javaTpoint</p> <p>This is a bold text</p> Uitvoer
Uitleg:
In de bovenstaande code hebben we interne CSS gebruikt en de eigenschap font-weight toegepast.
chown-opdracht
3. Hoe we vetgedrukte tekst kunnen maken met externe styling
Hier moeten we een extern CSS-bestand maken en dit aan het HTML-bestand koppelen. In dat CSS-bestand moeten we de stijleigenschap schrijven. Laten we een voorbeeld nemen.
HTML code:
reeks van int
Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p>
CSS-code:
p { font-weight: bold; } Uitvoer
Uitleg:
In de bovenstaande code hebben we de externe CSS-eigenschap gebruikt en de font-weight-eigenschap geïmplementeerd.
Voorbeeld
Laten we eens kijken hoe u vetgedrukte tekst in verschillende tinten kunt maken aan de hand van het onderstaande voorbeeld:
p{ font-size: 20px; } <p>This font is normal.</p> <p>This font is bold.</p> <p>This font is lighter.</p> <p>This font is bolder.</p> <p>This font is 100 weight.</p> <p>This font is 200 weight.</p> <p>This font is 300 weight.</p> <p>This font is 400 weight.</p> <p>This font is 500 weight.</p> <p>This font is 600 weight.</p> <p>This font is 700 weight.</p> <p>This font is 800 weight.</p> <p>This font is 900 weight.</p> Uitvoer
