diedVIPs

html knowhow

Schrifteinbindung - <link ref>












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