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 /> <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 |