Hoe <li> onderscheiden van elkaar

Status
Niet open voor verdere reacties.
V

verslegerss

Gebruiker
Lid geworden
25 jul 2010
Berichten
34
Ik heb een opsomming (met opsommingsteken). Ik zou graag op elke <li> een andere font willen toepassen met een link naar google fonts, maar hoe kan ik voor css een onderscheid maken tussen de verschillende li?
 
van dat topic ben ik niet tot het juiste resultaat gekomen, even los van dat topic: hoe wordt normaal gezien een onderscheid gemaakt tussen de 1ste <li> en 2de <li>

ik heb:

<body>
<ul>
<li>Bed</li>
<li>Tafel</li>
<li>Stoelen</li>
<li>Zetels</li>
<li>TV</li>

</ul>
</body>
 
Ik zou graag op elke <li> een andere font willen toepassen
Klik om te vergroten...
Stel dat je 10 verschillende fonts laat zien, met 10 keer een <li> in je lijst, dan wordt de pagina behoorlijk traag omdat je 3 x 10 = 30 font bestanden moet laden. Omdat nog niet elke browser met .woff2 font bestanden overweg kan heb je van elk font de volgende bestanden nodig:
.woff2 voor moderne browsers
.woff voor browsers die woff2 niet supporten of niet uptodate zijn
.svg voor safari browser op mac, iphone en ipad

Dan laat ik .eot en .ttf achterwege omdat woff/woff2 de w3c standaard is.

Alternatief: Je kan van elk font een screenshot maken en de afbeeldingen in je lijst zetten.
10 afbeeldingen hebben veel minder kB's dan 30 font bestanden.
 
2 opties denk ik.

voor elke <li> een google font laden in de <head>, bijvoorbeeld Raleway font
Code: 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
ul li:nth-child(2) { font-family: 'Raleway', sans-serif; }
</style>

of met afbeeldingen werken, pagina laadt dan sneller in de browser
Code: 
<!-- in de head -->
<style>
ul li img { vertical-align: middle; border: 0; width: 100%; height: auto; }
</style>
<!-- in de body -->
<ul>
<li><img src="voorbeeld-eenleuk-font.jpg" alt=""></li>
<li><img src="voorbeeld-railway-font.jpg" alt=""></li>
<li><img src="voorbeeld-nog-een-font.jpg" alt=""></li>
</ul>
 
Laatst bewerkt:
Bron: Als je met afbeeldingen wil werken: hoe moet ik dan het woord 'bed' in een afbeelding met andere font krijgen?
 
Een afbeelding maken met elk een ander font. :)

Een afbeelding kan je met Paint maken of met Photoshop, Paintshop Pro of The Gimp (en zo zijn er nog 1.001 andere mogelijkheden)
Dit is niet iets waar nog HTML of CSS bij komt kijken.

Je kan ook een afbeelding dynamisch met PHP genereren, maar dat is weer een vak apart waarmee ik je liever niet mee wil belasten ;).
SVG zou ook een mooie alternatief zijn, maar is lastiger te onderhouden als je de tekst steeds aan wilt passen.
 
Laatst bewerkt:
Ga naar https://fonts.google.com

1. Zoek een lettertyype en klik op 'Custom'
2. Typ de tekst die je wilt, als voorbeeld: bed
3. Zet de font grootte zoals je 'm wilt hebben
4. Maak een screenshot. Knip de tekst in een paint programma.

font-afbeelding.jpg
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan