adryd325/font-diff.html

## font-diff.html
<!-- Heavily borrowed from https://tiff.herokuapp.com/ -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font Diff</title>
  </head>
  <body>
    <style>
      .character {
        width: 2em;
        height: 2em;
        line-height: 2em;
        float: left;
      }

      .sentence {
        line-height: 2em;
        float: left;
      }

      .font-sentence::before {
        width: 100%;
        display: inline-block;
        margin-right: -100%;
        text-align: center;
      }

      .font-character {
          width: 100%;
          display: inline-block;
          margin-right: -100%;
          text-align: center;
          opacity: 0;
        }
    </style>
    <div style="font-family: sans-serif; font-size: 24; font-weight: 700">
      <style>
        .font-sentence::before {
          content: "How are you doing today";
        }

        .font-common {
          font-weight: 400;
          font-size: 72pt;
          font-style: normal;
        }

        .font-1 {
          font-family: "Inter";
          color: #72b3cc;
          opacity: 1;
        }

        .font-2 {
          font-family: "SF Pro Text";
          color: #c75646;
          opacity: 0.5;
        }
      </style>
      <!-- Edit above -->
      <span>Right click here and inspect element!</span>
    </div>
    <div>
      <div class="sentence">
        <span class="font-common font-1"><span class="font-sentence"></span></span
        ><span class="font-common font-2"><span class="font-sentence"></span></span>
      </div>
    </div>
    <div id="characters"></div>
    <script defer>
      // So I've decided setting up svelte is too much for such a simple hack
      const minCharCode = 0x20;
      const maxCharCode = 0x7f;
      const characters = [];
      for (let index = minCharCode; index < maxCharCode; index++) {
        characters.push(String.fromCharCode(index));
      }

      const mount = document.getElementById("characters");
      for (character of characters) {
        const charElement = document.createElement("div");
        charElement.className = "font-common character";

        const font1Element = document.createElement("span");
        font1Element.className = "font-character font-1";
        font1Element.innerText = character;

        const font2Element = document.createElement("span");
        font2Element.className = "font-character font-2";
        font2Element.innerText = character;

        charElement.appendChild(font1Element);
        charElement.appendChild(font2Element);
        mount.appendChild(charElement);
      }
    </script>
  </body>
</html>
	<!-- Heavily borrowed from https://tiff.herokuapp.com/ -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Font Diff</title>
	</head>
	<body>
	<style>
	.character {
	width: 2em;
	height: 2em;
	line-height: 2em;
	float: left;
	}

	.sentence {
	line-height: 2em;
	float: left;
	}

	.font-sentence::before {
	width: 100%;
	display: inline-block;
	margin-right: -100%;
	text-align: center;
	}

	.font-character {
	width: 100%;
	display: inline-block;
	margin-right: -100%;
	text-align: center;
	opacity: 0;
	}
	</style>
	<div style="font-family: sans-serif; font-size: 24; font-weight: 700">
	<style>
	.font-sentence::before {
	content: "How are you doing today";
	}

	.font-common {
	font-weight: 400;
	font-size: 72pt;
	font-style: normal;
	}

	.font-1 {
	font-family: "Inter";
	color: #72b3cc;
	opacity: 1;
	}

	.font-2 {
	font-family: "SF Pro Text";
	color: #c75646;
	opacity: 0.5;
	}
	</style>
	<!-- Edit above -->
	<span>Right click here and inspect element!</span>
	</div>
	<div>
	<div class="sentence">
	<span class="font-common font-1"><span class="font-sentence"></span></span
	><span class="font-common font-2"><span class="font-sentence"></span></span>
	</div>
	</div>
	<div id="characters"></div>
	<script defer>
	// So I've decided setting up svelte is too much for such a simple hack
	const minCharCode = 0x20;
	const maxCharCode = 0x7f;
	const characters = [];
	for (let index = minCharCode; index < maxCharCode; index++) {
	characters.push(String.fromCharCode(index));
	}

	const mount = document.getElementById("characters");
	for (character of characters) {
	const charElement = document.createElement("div");
	charElement.className = "font-common character";

	const font1Element = document.createElement("span");
	font1Element.className = "font-character font-1";
	font1Element.innerText = character;

	const font2Element = document.createElement("span");
	font2Element.className = "font-character font-2";
	font2Element.innerText = character;

	charElement.appendChild(font1Element);
	charElement.appendChild(font2Element);
	mount.appendChild(charElement);
	}
	</script>
	</body>
	</html>