diedVIPs

html knowhow

Schriften einbinden












Fonts

Nicht alle Schriften, die Sie auf ihrem Computer haben, sind tauglich für das Internet. Deshalb müssen Sie eventuell externe Schriften einbinden. Diese finden Sie unter anderen auf: fonts.google



Beispiel Fontschriften

Es gibt dort nicht nur die unten Dargestellten, sondern hunderte mehr in unterschiedlichen Kathegorien.
Quellcode So sieht´s aus
<html>

<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2? family=Rock+Salt&display=swap" rel="Stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Princess+Sofia&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet" />
</head>

<style type="text/css">
Hier nichts
</style>

<body >
Princess Sofia<br />&nbsp;<span style="font-family: 'Princess Sofia', cursive; font-size:1.5em;">htmlKnowhow</span><br/><br/>
Sigmar One<span style="font-family: 'Sigmar One', cursive; font-size:1.5em;"><br />htmlKnowhow</span><br/><br/>
Rock Salt<span style="font-family: 'Rock Salt', cursive; font-size:1.5em;"><br />htmlKnowhow</span><br/><br/>
Rye<span style="font-family: 'Rye', cursive; font-size:1.5em;"><br />htmlKnowhow</span>

</body>
</html>



Princess Sofia
htmlKnowhow


Sigmar One
htmlKnowhow


Rock Salt
htmlKnowhow


Rye
htmlKnowhow


Der Schrifteffekt

Das normale <p> gilt eigentlich für den normalen Text. Wenn Sie aber verschiedene Schriftzüge anders gestalten wollen, setzen Sie #p im <style>. Das gilt dann nur für Schriftzüge, die mit ´id="p"´ aufgerufen werden.

Natürlich können Sie die Farben selbst wählen, in dem Sie z.B. ´color: #E7E7E7´ in ´#8877FF´ umwandeln, oder eine ganz andere Farbe wählen.

Quellcode So sieht´s aus
<html>

<head>
#p {text-shadow:1px 0px 1px #eee, 0px 1px 1px #ccc,2px 1px 1px #eee, 1px 2px 1px #ccc,3px 2px 1px #eee, 2px 3px 1px #ccc,4px 3px 1px #eee, 3px 4px 1px #ccc,
5px 4px 1px #eee, 4px 5px 1px #ccc,6px 5px 1px #eee, 5px 6px 1px #ccc,6px 6px 1px #eee;}
#p2 {color: #E7E7E7; text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;}
#p3 {color: #222222;text-shadow: 0 0 0.2em #8877FF, 0 0 0.2em #8877FF, 0 0 0.2em #8877FF;}
#p4 {background: none repeat scroll 0 0 transparent;color: #707070;text-shadow: 3px 3px 0 #EEEEEE, 5px 5px 0 #707070;}
</head>

<style type="text/css">
Hier nichts
</style>

<body >
Princess Sofia<span id="p" style="font-family: 'Princess Sofia', cursive; font-size:1.5em;"><br />htmlKnowhow</span><br/><br/>
Sigmar One<span id="p2" style="font-family: 'Sigmar One', cursive; font-size:1.5em;"><br />htmlKnowhow</span><br/><br/>
Rock Salt<span id="p3" style="font-family: 'Rock Salt', cursive; font-size:1.5em;"><br />htmlKnowhow</span><br/><br/>
Rye<span id="p4" style="font-family: 'Rye', cursive; font-size:1.5em;"><br />htmlKnowhow</span>
</body>

</html>



Princess Sofia
htmlKnowhow


Sigmar One
htmlKnowhow


Rock Salt
htmlKnowhow


Rye
htmlKnowhow








Kontakt    Datenschutz    Impressum