Created
September 12, 2017 15:13
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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