init
This commit is contained in:
commit
10f7485fea
BIN
fonts/Authentic Claisha.ttf
Normal file
BIN
fonts/Authentic Claisha.ttf
Normal file
Binary file not shown.
BIN
fonts/BebasNeue-Regular.otf
Normal file
BIN
fonts/BebasNeue-Regular.otf
Normal file
Binary file not shown.
BIN
fonts/Birds of Paradise © PERSONAL USE ONLY.ttf
Normal file
BIN
fonts/Birds of Paradise © PERSONAL USE ONLY.ttf
Normal file
Binary file not shown.
BIN
fonts/Breathney Demo.ttf
Normal file
BIN
fonts/Breathney Demo.ttf
Normal file
Binary file not shown.
BIN
fonts/Cream Beige.otf
Normal file
BIN
fonts/Cream Beige.otf
Normal file
Binary file not shown.
BIN
fonts/DRAGON HUNTER.otf
Normal file
BIN
fonts/DRAGON HUNTER.otf
Normal file
Binary file not shown.
BIN
fonts/Eracake.otf
Normal file
BIN
fonts/Eracake.otf
Normal file
Binary file not shown.
BIN
fonts/Happy Beige.otf
Normal file
BIN
fonts/Happy Beige.otf
Normal file
Binary file not shown.
BIN
fonts/Happy Selfie.otf
Normal file
BIN
fonts/Happy Selfie.otf
Normal file
Binary file not shown.
BIN
fonts/Mister Grape - Personal Use.otf
Executable file
BIN
fonts/Mister Grape - Personal Use.otf
Executable file
Binary file not shown.
BIN
fonts/Muthiara demo version.otf
Normal file
BIN
fonts/Muthiara demo version.otf
Normal file
Binary file not shown.
BIN
fonts/Quirk Chick.ttf
Normal file
BIN
fonts/Quirk Chick.ttf
Normal file
Binary file not shown.
BIN
fonts/Sinera.otf
Normal file
BIN
fonts/Sinera.otf
Normal file
Binary file not shown.
BIN
fonts/Starborn.otf
Normal file
BIN
fonts/Starborn.otf
Normal file
Binary file not shown.
BIN
fonts/Vogue.ttf
Normal file
BIN
fonts/Vogue.ttf
Normal file
Binary file not shown.
BIN
fonts/coolvetica rg.otf
Normal file
BIN
fonts/coolvetica rg.otf
Normal file
Binary file not shown.
206
index.html
Normal file
206
index.html
Normal file
|
@ -0,0 +1,206 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hello fonts</title>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Authentic Claisha";
|
||||
src: url("fonts/Authentic Claisha.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "BebasNeue-Regular";
|
||||
src: url("fonts/BebasNeue-Regular.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Birds of Paradise © PERSONAL USE ONLY";
|
||||
src: url("fonts/Birds of Paradise © PERSONAL USE ONLY.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Breathney Demo";
|
||||
src: url("fonts/Breathney Demo.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "coolvetica rg";
|
||||
src: url("fonts/coolvetica rg.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Cream Beige";
|
||||
src: url("fonts/Cream Beige.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DRAGON HUNTER";
|
||||
src: url("fonts/DRAGON HUNTER.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Eracake";
|
||||
src: url("fonts/Eracake.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Happy Beige";
|
||||
src: url("fonts/Happy Beige.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Happy Selfie";
|
||||
src: url("fonts/Happy Selfie.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Mister Grape - Personal Use";
|
||||
src: url("fonts/Mister Grape - Personal Use.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Muthiara demo version";
|
||||
src: url("fonts/Muthiara demo version.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quirk Chick";
|
||||
src: url("fonts/Quirk Chick.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sinera";
|
||||
src: url("fonts/Sinera.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Starborn";
|
||||
src: url("fonts/Starborn.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Vogue";
|
||||
src: url("fonts/Vogue.ttf");
|
||||
}
|
||||
|
||||
.font-1 {
|
||||
font-family: "Authentic Claisha";
|
||||
}
|
||||
.font-2 {
|
||||
font-family: "BebasNeue-Regular";
|
||||
}
|
||||
.font-3 {
|
||||
font-family: "Birds of Paradise © PERSONAL USE ONLY";
|
||||
}
|
||||
.font-4 {
|
||||
font-family: "Breathney Demo";
|
||||
}
|
||||
.font-5 {
|
||||
font-family: "coolvetica rg";
|
||||
}
|
||||
.font-6 {
|
||||
font-family: "Cream Beige";
|
||||
}
|
||||
.font-7 {
|
||||
font-family: "DRAGON HUNTER";
|
||||
}
|
||||
.font-8 {
|
||||
font-family: "Eracake";
|
||||
}
|
||||
.font-9 {
|
||||
font-family: "Happy Beige";
|
||||
}
|
||||
.font-10 {
|
||||
font-family: "Happy Selfie";
|
||||
}
|
||||
.font-11 {
|
||||
font-family: "Mister Grape - Personal Use";
|
||||
}
|
||||
.font-12 {
|
||||
font-family: "Muthiara demo version";
|
||||
}
|
||||
.font-13 {
|
||||
font-family: "Quirk Chick";
|
||||
}
|
||||
.font-14 {
|
||||
font-family: "Sinera";
|
||||
}
|
||||
.font-15 {
|
||||
font-family: "Starborn";
|
||||
}
|
||||
.font-16 {
|
||||
font-family: "Vogue";
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
#hello-world {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#hello-world > * {
|
||||
display: inline-block;
|
||||
width: 5vw;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="hello-world">
|
||||
<span>H</span>
|
||||
<span>e</span>
|
||||
<span>l</span>
|
||||
<span>l</span>
|
||||
<span>o</span>
|
||||
|
||||
<span class="space"> </span>
|
||||
|
||||
<span>W</span>
|
||||
<span>o</span>
|
||||
<span>r</span>
|
||||
<span>l</span>
|
||||
<span>d</span>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
const helloWorld = document.getElementById("hello-world");
|
||||
const children = [...helloWorld.children];
|
||||
|
||||
const removeFont = (elem) => {
|
||||
elem.classList.values().forEach((cls) => {
|
||||
if (cls.match("font")) {
|
||||
elem.classList.remove(cls);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateFont = (elem) => {
|
||||
removeFont(elem);
|
||||
const fontIdx = Math.ceil(Math.random() * 16);
|
||||
elem.classList.add(`font-${fontIdx}`);
|
||||
};
|
||||
|
||||
children.forEach((char) => {
|
||||
updateFont(char);
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
const random = Math.floor(Math.random() * children.length);
|
||||
updateFont(children[random]);
|
||||
}, 200);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in a new issue