JSFiddle - React, Tailwind, and code Playground

HTML

<table id="result" border="1">
  <tr>
    <th>Original</th>
    <th>Specified</th>
    <th>Computed</th>
  </tr>
</table>
<template id="row">
  <tr>
    <td><code></code></td>
    <td><code></code></td>
    <td><code></code></td>
  </tr>
</template>
<div id="test"></div>

JavaScript

function visualizeSpace(text) {
  return text.replace(/ /g, '\u2423');
}
let families = [
  `Foo`,
  `Foo Bar`,
  `Foo\\ Bar`,
  `Foo\\  Bar`,
  `\\ Foo\\ `,
  `"Foo"`,
  `"Foo Bar"`,
];
let cells = row.content.querySelectorAll("code");
let s = test.style;
let cs = getComputedStyle(test);
for (let family of families) {
  s.fontFamily = family;
  cells[0].textContent = visualizeSpace(family);
  cells[1].textContent = visualizeSpace(s.fontFamily);
  cells[2].textContent = visualizeSpace(cs.fontFamily);
  result.appendChild(document.importNode(row.content, true));
}