Lijst met Javascript-lettertypen

ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module

Michael Zippo

De opmaak van tekst op een webpagina is een belangrijk onderdeel van webdesign. U wilt bijvoorbeeld dat de koppen in een specifiek lettertype worden weergegeven, of dat alle tekst op een pagina het lettertype serif gebruikt.

Dit is waar de CSS font staat: de familie komt in het spel. Met de eigenschap CSS-lettertypefamilie kunt u een of meer lettertypefamilies specificeren die worden gebruikt om de tekst op een webpagina op te maken.

In deze zelfstudie wordt de basis behandeld door te verwijzen naar voorbeelden van CSS font-familie en hoe u de eigenschap kunt gebruiken om tekst op een webpagina op te maken.

CSS-lettertypefamilie

Er zijn veel aspecten betrokken bij het opmaken van een lettertype in CSS, van het instellen van een kleur tot maat. de politie. Een van de belangrijkste onderdelen van een lettertypestijl is echter het definiëren van de lettertypefamilie, de stijl die wordt gebruikt door tekst op een webpagina.

Definieer de lettertypefamilie die wordt gebruikt door tekst op een webpagina, kunt u de eigenschap font-family gebruiken. De syntaxis van de eigenschap font-family is als volgt:

De eigenschap font-family accepteert een enkel lettertype of een lijst met lettertypen. Als u meer dan één teken opgeeft, moet u elk teken scheiden met een komma.

De volgorde waarin de tekens worden weergegeven, is de volgorde waarin de browser probeert de tekens toe te passen. De browser gebruikt standaard het eerste lettertype in de lijst dat is geïnstalleerd of kan worden gedownload van de webbrowser. Als dit teken niet beschikbaar is, wordt het tweede teken gebruikt, enzovoort.

Het is belangrijk om op te merken dat de eigenschap font-family een lettertype selecteert voor elk teken in een tekstblok. Als een bepaald teken niet beschikbaar is in een lettertype, wordt het volgende lettertype van uw lettertype in de familielijst geprobeerd, totdat een geschikt teken kan worden gevonden.

Als je font-weight gebruikt, is het het is het beste om ten minste één generiek lettertype voor de achternaam op te nemen (zoals schreef, schreefloos of monospace). Dit zorgt ervoor dat als een ander lettertype in de lijst niet beschikbaar is, de browser nog steeds een lettertype kan selecteren voor de tekst op een webpagina die moet worden weergegeven.

Er zijn twee manieren waarop u dit kunt gebruiken de eigenschap font-family. Ten eerste kunt u de eigenschap gebruiken om een aangepast lettertype voor een webpagina op te geven. Ten tweede kunt u de eigenschap gebruiken om een generieke lettertypefamilie toe te passen op tekst op een webpagina. De generieke lettertypefamilies die beschikbaar zijn voor gebruik met de eigenschap font-family zijn als volgt:

• serif: lettertypen gebruiken het serif-lettertype (bijv. Lucida Bright, Palladio).
• sans-serif: lettertypen gebruiken het sans-serif-lettertype (bijv. Open Sans, Trebuchet MS).
• monospace: de tekens zijn allemaal even breed (bijv. minibus, Menlo).
• li>cursief: de karakters hebben een koppelteken (bijv. Lucida Calligraphy).
• fantasie: decoratieve lettertypen die worden gebruikt om de aandacht te vestigen op lettertypen (bijv. Papyrus).

Er zijn andere generieke lettertypefamilies beschikbaar, die u in meer detail kunt lezen in Mozilla CSS Font Family-documentatie .

Nu we de basis van de font-family-eigenschap kennen, kunnen we enkele voorbeelden bekijken van hoe het in actie werkt .

Voorbeelden van CSS-lettertypefamilies

Een lokale postzegel vroeg ons, de Seattle Stamp Club, om de lettertypen voor delen van hun website.

Allereerst werden we gevraagd om het lettertype van alle

-headers op hun "Contacten"-pagina te wijzigen om de "Open Sans" te gebruiken lettertype. Dus bijvoorbeeld de "Contact" op de "Contact"-pagina van hun website zou in Open Sans moeten verschijnen. Als dit lettertype niet beschikbaar is, moet de generieke "sans-serif"-familie worden gebruikt. We kunnen hiervoor de volgende code gebruiken:

Klik " noscript> knop in de code-editor hierboven om de uitvoer van onze HTML / CSS-code te zien .

In onze HTML-code hebben we een header gespecificeerd met een

-tag die de tekst Contact bevat. Dus in onze CSS-code gebruikten we de lettertypefamilie om het lettertype voor de

-elementen op onze webpagina in te stellen.

De waarde die we aan de eigenschap font-familie hebben toegewezen, stelt het lettertype in voor alle

-elementen in Open Sans en als dit lettertype niet beschikbaar is, wordt de generieke familie sans-serif gebruikt. Om dit te bereiken hebben we twee tekens gespecificeerd, gescheiden door een komma.

Stel nu dat we ook een stijl willen toepassen op alle tekens

elementen van de pagina Contactpersonen van de postzegelclub om het lettertype Times te gebruiken. Als dit lettertype niet beschikbaar is, er moet een standaard serif-lettertype worden gebruikt. We kunnen hiervoor de volgende code gebruiken:

Klik 24" in de code-editor hierboven om de uitvoer van onze HTML / CSS-code te zien.

In ons voorbeeld hebben we een alinea met tekst gedeclareerd met een

tag . Vervolgens definiëren we de lettertypefamilie van alle

tags in onze CSS-stylesheet om de Times en serif-lettertypen. Standaard probeert de browser alle

tags in het Times-lettertype weer te geven. Als dit lettertype niet beschikbaar is, wordt de serif lettertype wordt gebruikt.