Skip to content

Instantly share code, notes, and snippets.

@xerz-one

xerz-one/fonttest.html

Created January 11, 2019 18:27
Show Gist options
  • Save xerz-one/ee20aace2c08e5a2d4d3f0484118863a to your computer and use it in GitHub Desktop.
Save xerz-one/ee20aace2c08e5a2d4d3f0484118863a to your computer and use it in GitHub Desktop.
Download ZIP
HTML testpage for previewing and playing with fonts
Raw
fonttest.html
<!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>
@xerz-one
Copy link
Author

If you want to change the text being displayed, it's as simple as properly tweaking and running this line of ECMAScript 2015:

document.querySelectorAll('p').forEach((p) => { p.textContent = "Here's where the text goes" })

Replacing the forEach with a regular loop should make it work with most implementations of ECMAScript, like this:

lines = document.querySelectorAll('p');
for (n = 0; n < lines.length; n++) {
	lines[n].textContent = "Here's where the text goes";
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment