Skip to content

Instantly share code, notes, and snippets.

@ludoo0d0a
Created September 12, 2017 15:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ludoo0d0a/5aafb003f1d3c5b177177367919d0336 to your computer and use it in GitHub Desktop.
Save ludoo0d0a/5aafb003f1d3c5b177177367919d0336 to your computer and use it in GitHub Desktop.
<Font inspector> To list all unicodes glyph characters for a font family on an already existing web site.
/*eslint-disable */
/*
Copy paste this code in Chrome console. Then execute
fontlist('MyFontFamily', 0, 200);
It will display the dictionary for all characters and their mapping with the right rendered glyph.
*/
function fontlist(name, start, end, range){
var ID = 'font-list', IDS= 'style-'+ID;
range=range||'f';
start=start||0;
end=end||280
var css = [
'h5,h6{ text-align: center;}',
'#font-list { margin-top: 3em; position: absolute; top: 10px; left: 10px; z-index: 99999; background-color: #fff; border: 2px solid #dedede; padding: 5px;}',
'#font-list ul { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px}',
'#font-list li { list-style: none; padding-left: 0; padding-bottom: 6px}',
'#font-list li:before { display: none; width: 0; height: 0}',
'#font-list li i:before { font-size: 24px; font-size: 1.5rem; position: relative; top: 4px; color: #666}',
'#font-list li:hover { background-color: #eee}',
'#font-list li:hover i:before { color: #ae0000}',
'#font-list span { display: inline-block; font-family: \''+name+'\',sans-serif; font-size: 13px; font-size: 1.4rem}',
'#font-list i { width: 30px; text-align: center; margin-right: 20px}',
'#font-list .icon-name { width: 90px; text-align: left}',
'#font-list .icon-value { color: #AE0000}',
'.myfont { display: inline-block; font: normal normal normal 14px/1 '+name+'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}'
];
var r = [];
var css2 = [];
r.push('<h5>Font inspector (LudoO)</h5>')
r.push('<h6> for Font family : '+name+ '</h6>')
r.push('<ul class="font-group">')
for (var i = start; i<=end; i++) {
var cls = 'myfont-'+i, code= '\\' + range + ("000" + i).slice(-3) ;
css.push('.'+cls+':before { content: "'+code+'";}');
r.push('<li><i class="myfont '+cls+'"></i><span class="icon-name">'+cls+'</span><span class="icon-value">"'+code+'"</span></li>')
}
r.push('</ul>');
var el = document.getElementById(ID);
if (el){
el.parentNode.removeChild(el);
var elStyle = document.getElementById(IDS);
if (elStyle){
elStyle.parentNode.removeChild(elStyle);
}
el=false;
}
if (!el){
el = document.createElement('div');
style = document.createElement('style');
style.type = "text/css";
style.id=IDS;
style.innerHTML=css.join('\n');
document.head.appendChild(style);
el.id=ID;
document.body.appendChild(el);
}
el.innerHTML = r.join('');
}
//sample for fontawesome on http://fontawesome.io/
fontlist('FontAwesome', 0, 999, 'f');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment