diedVIPs

html knowhow

Externe Schriften - <font>












Fonts

Nicht alle Schriften, die Sie auf ihrem Computer haben, sind tauglich für das Internet. Deshalb müssen Sie eventuell externe Schriften einbinden.

Der einfachste Weg, zusätzliche Schriften in die eigene Website einzubauen, geht über Google. Rufen Sie Google Fonts auf. Suchen Sie oben links nach der jeweiligen Schrift. Alternativ können Sie in der Liste scrollen und bekommen so einen Überblick über die verfügbaren Schriften.Diese finden Sie unter anderen auf: fonts.google

Beispiel:
 <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" />



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