Text

Wie kann man Text schneller anzeigen?

Weil Schriftartendateien oft sehr groß sind, dauert es bis der Besucher einer Webseite Text sieht.
Um schnell Text darzustellen nutzt man font-display: swap.
Durch swap wird vorrübergehend erst eine System-Schrift geladen.
Später dann wird die eigens angegebene Schrift nachgeladen.
Man nutzt folgendes CSS:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

Wie kann man Text über einem Bild positionieren?

Man braucht CSS:

.bild figcaption {width: 100%; height: 60px;}
@media (min-width:480px) {.bild {position:relative;width:450px;height: 192px;}
.bild div {position: absolute;}
.bild figcaption {position: absolute;bottom: 0px;}
.text1 {color:red;}
.text2 {color:yellow;}
}

Man braucht den Code für die Stelle, wo das Bild hin soll:

<figure class="bild"><div>
<img src="https://praxislexikon.de/_bild_arti/landschaft-b.jpg" alt="bild" width="275" height="150">
</div>
<figcaption><span class="text1">Dieser Text steht über dem Bild</span><br><span class="text2">ist das nicht schön?</span></figcaption></figure>

bild — Dieser Text steht über dem Bild
ist das nicht schön?

Wie kann man einen Text durch klicken verbergen?

Man sieht einen Link.
Wenn man den Link anklickt, ist der vorher sichtbare Text verschwunden.
JavaScript wird verwendet.
Man muss folgenden JavaScript-Code einfügen.

<script>
// Elemente einblenden
// Mit show_elements() können einzelne oder mehrere Elemente
// via show_elements('ElementIDone','ElementIDtwo','ElementIDthree')
// eingeblendet werden.
function show_elements()
 {
  var elementNames = show_elements.arguments;
  for (var i=0; i<elementNames.length; i++)
   {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='block';
   }
 }
// Elemente ausblenden
// Mit show_elements() können einzelne oder mehrere Elemente
// via hide_elements('ElementIDone','ElementIDtwo','ElementIDthree')
// ausgeblendet werden.
function hide_elements()
 {
  var elementNames = hide_elements.arguments;
  for (var i=0; i<elementNames.length; i++)
   {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='none';
   }
 }
</script>

An der Stelle, wo der Link stehen soll muss man diesen HTML-Code einfügen:

<div id="text_html">
<p><a href="#" title="Verbergen" onclick="hide_elements('text_html');return false">Text verstecken</a></p>
<p>Dieser Text verschwindet, wenn man den Link anklickt.</p>
</div>

Jetzt ausprobieren:

Text verstecken

Dieser Text verschwindet, wenn man den Link anklickt.

Seite neu Laden zum erneuten testen. JETZT
Man kann aber auch Folgendes einfügen, dann gibt es gleich einen Link, der den Text wieder anzeigt:

<p id="linkShow_css">
		<a href="#" title="Anzeigen" onclick="show_elements('text_css');hide_elements('linkShow_css'); return false">zeigen</a>
	</p>
	<div id="text_css" class="noscript">
		<p>
			Text der bei einem klick auf zeigen erscheint.
		</p>
		<p><a href="#" title="Verbergen" onclick="show_elements('linkShow_css');hide_elements('text_css');return false">Nicht zeigen</a></p>
	</div>

Das sieht dann so aus:

Zeigen

Text der bei einem klick auf Zeigen erscheint.

Nicht zeigen

return false ist dabei wichtig, damit beim Link klicken die Seite nicht nach oben springt.