HTML5 - Werken met lettertypen - Deel1

Een van de fundamentele aspecten bij het werken met tekst in HTML zijn de beeldveranderingen die kunnen optreden door alleen het lettertype van de letters te veranderen, maar er zijn twee aspecten van professionals die hiermee werken, de ontwerpers die elk aspect van de typografie willen veranderen en de programmeurs die, hoewel ze dat willen als ze met hen werken, willen ze hier niet zulke ingrijpende veranderingen in aanbrengen.
Lettertype-eigenschappen
Voordat we met de bronnen gaan werken, gaan we hun eigenschappen beoordelen om de achtergrond hiervan te kennen:

• font-familie: Specificeert de lettertypefamilie voor een tekstblok.
• lettertypegrootte: Specificeert de lettergrootte voor een tekstblok.
• lettertype: Specificeert de stijl van het lettertype, het kan normaal, cursief of schuin zijn.
• lettertype-variant: Geeft aan of de tekst van het blok kan worden weergegeven in smallcaps-lettertype, de mogelijke waarden zijn smallcaps en normaal.
• lettertype dikte: Specificeert het gewicht van het lettertype voor een tekstblok, dat wil zeggen, de dikte, de waarden kunnen normaal, vet, vetter, lichter zijn.
• lettertype: Snelkoppeling waarmee u het lettertype in één regel kunt specificeren.

Een bron selecteren
Het eigendom font-familie We bepalen de groep lettertypen die zal worden gebruikt door een voorkeursvolgorde vast te stellen, zodat als er een niet beschikbaar is, deze wordt doorgegeven aan de volgende in volgorde van voorkeur. De browser begint met het eerste lettertype in de lijst en blijft proberen voor elk van de lettertypen in de vastgestelde volgorde totdat er een is die hij kan gebruiken.
Dit gebeurt omdat we mogelijk lettertypen moeten gebruiken die op de pc van een gebruiker zijn geïnstalleerd of die tot een specifiek besturingssysteem behoren, zodat als een andere gebruiker niet aan de vereisten voldoet, we kunnen bepalen hoe dit ons document beïnvloedt.
Laten we tot slot een lijst bekijken van generieke lettertypen die standaard voor alle systemen beschikbaar zouden moeten zijn en waarmee we geen problemen zouden moeten hebben.

• schreef
• schreefloos
• cursief
• fantasie
• monospace

Zeer goed omdat we het theoretische aspect hebben behandeld van wat de verwerking van bronnen is, laten we voorbeelden zien met code, dat is waar we onze kennis zullen verkrijgen over hoe we alles wat we hebben bestudeerd in de praktijk kunnen brengen:

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

In deze code zien we dat een onconventioneel lettertype is gedefinieerd in de lettertypefamilie, omdat het een eigen lettertype is HelveticaNeue Gecondenseerd en dan plaatsen we als tweede voorkeur monospace Laten we eens kijken hoe we dit in de browser kunnen zien, voor elk van de gedefinieerde gevallen.
[bijlage = 861: html5fuentes.jpg.webp]
Aan de linkerkant van de afbeelding hebben we het geval waarin het lettertype dat als eerste keuze is geplaatst niet bestaat, dat wil zeggen het lettertype monospace, aan de rechterkant zien we het eigen lettertype.
Hiermee ronden we de tutorial af, nadat we de theoretische basis hebben gekend en in de praktijk hebben gebracht, kunnen we nu een beetje spelen met de bronnen van onze applicatie en meer visueel aantrekkelijke resultaten bereiken en in overeenstemming met wat we willen.
U kunt deel 2 van deze handleiding verder lezen.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven