JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id='result'></div>

JavaScript

var fonts = ["Tahoma","Arial","Verdana","Helvetica","Trebuchet MS", "Arial Black", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Lucida Console", "Lucida Sans Unicode", "Lucida Grande", "Geneva", "Times New Roman", "MS Sans Serif", "MS Serif", "Palatino Linotype", "Times", "Monaco"];

var testString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789!@#$%^&*()_+:/?";
var weights = ["normal", "bold"];
var styles = ["normal", "italic"];

function getStringWidth(font, fontstyle, fontSize, fontWeight, string){
		var hidden = $('<span id="hidden" style="font-family: ' + font + '; font-size: ' + fontSize + '; font-style:' + fontstyle + '; font-weight:' + fontWeight + ';"></span>');
		$('body').append(hidden);
 		hidden.text(string.repeat(20));
    var width = hidden[0].getBoundingClientRect().width;
    $('body').children("span").remove();
    return (width/20).toFixed(2);
}
for(var c = 0; c < testString.length; c++){
var char = testString[c];
$("#result").append(char + ": ");
for(var s = 0; s < styles.length; s++){
var fontStyle = styles[s];
for(var w = 0; w < weights.length; w++){
var fontWeight = weights[w];
for(var i = 0; i < fonts.length; i++){
$("#result").append(getStringWidth(fonts[i], fontStyle, "43px", fontWeight, char) + ", ");
}
}
}
$("#result").append("<br/>");
}