Created
January 11, 2019 18:27
-
-
Save xerz-one/ee20aace2c08e5a2d4d3f0484118863a to your computer and use it in GitHub Desktop.
HTML testpage for previewing and playing with fonts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Font testpage</title> | |
<style> | |
/* Replace here with your color and font of choice */ | |
body { background: white; font-family: "Arial"; } | |
p { | |
margin: 0; padding: 0; | |
line-height: 100%; | |
background: inherit; | |
background-clip: text; | |
color: transparent; | |
filter: invert(1) grayscale(1) contrast(10); | |
} | |
.regular { font-weight: normal; } | |
.bold { font-weight: bold; } | |
.italic { font-style: italic; } | |
.s12 { font-size: 12px; } | |
.s18 { font-size: 18px; } | |
.s24 { font-size: 24px; } | |
.s36 { font-size: 36px; } | |
.s48 { font-size: 48px; } | |
.s72 { font-size: 72px; } | |
</style> | |
</head> | |
<body> | |
<p class="regular s72">Lorem Ipsum</p> | |
<p class="regular s48">Lorem Ipsum</p> | |
<p class="regular s36">Lorem Ipsum</p> | |
<p class="regular s24">Lorem Ipsum</p> | |
<p class="regular s18">Lorem Ipsum</p> | |
<p class="regular s12">Lorem Ipsum</p> | |
<p class="bold s72">Lorem Ipsum</p> | |
<p class="bold s48">Lorem Ipsum</p> | |
<p class="bold s36">Lorem Ipsum</p> | |
<p class="bold s24">Lorem Ipsum</p> | |
<p class="bold s18">Lorem Ipsum</p> | |
<p class="bold s12">Lorem Ipsum</p> | |
<p class="italic s72">Lorem Ipsum</p> | |
<p class="italic s48">Lorem Ipsum</p> | |
<p class="italic s36">Lorem Ipsum</p> | |
<p class="italic s24">Lorem Ipsum</p> | |
<p class="italic s18">Lorem Ipsum</p> | |
<p class="italic s12">Lorem Ipsum</p> | |
<p class="bold italic s72">Lorem Ipsum</p> | |
<p class="bold italic s48">Lorem Ipsum</p> | |
<p class="bold italic s36">Lorem Ipsum</p> | |
<p class="bold italic s24">Lorem Ipsum</p> | |
<p class="bold italic s18">Lorem Ipsum</p> | |
<p class="bold italic s12">Lorem Ipsum</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you want to change the text being displayed, it's as simple as properly tweaking and running this line of ECMAScript 2015:
Replacing the
forEach
with a regular loop should make it work with most implementations of ECMAScript, like this: