Last active
July 5, 2018 09:11
-
-
Save berstend/80bb7c04d620fda1e83fe6c8ebcee6d9 to your computer and use it in GitHub Desktop.
The edited wf.cs and wf.css files from http://chengyinliu.com/whatfont.html's bookmarklet.
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
@-webkit-keyframes slideDown{from{max-height:0}to{max-height:250px}}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}*{cursor:default!important}.__whatfont_basic{background:transparent;border:0 solid black;border-bottom:0 solid black;border-left:0 solid black;border-right:0 solid black;border-top:0 solid black;border-radius:none;-moz-border-radius:none;-webkit-border-radius:none;bottom:auto;box-shadow:none;-moz-border-radius:none;-webkit-box-shadow:none;clear:none;color:inherit;cursor:auto;float:none;font:inherit;height:auto;left:auto;list-style:none;margin:0;max-height:none;max-width:none;min-height:none;min-width:none;overflow:visible;padding:0;position:static;right:auto;text-align:inherit;text-decoration:none;text-indent:0;text-shadow:inherit;text-transform:none;top:auto;visibility:visible;width:auto;z-index:auto;zoom:1;-webkit-font-smoothing:antialiased}.__whatfont_basic *{color:inherit}.__whatfont_basic a,.__whatfont_basic a:visited .__whatfont_basic a:hover,.__whatfont_basic a:active{color:inherit;cursor:pointer!important;text-decoration:none}.__whatfont_elem{background:rgba(0,0,0,0.9);background:-moz-linear-gradient(top,rgba(30,30,30,0.95),rgba(0,0,0,0.9));background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,0.95)),to(rgba(0,0,0,0.9)));border:1px solid black;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:inset 0 0 1px #555,0 0 5px #000;-moz-box-shadow:inset 0 1px 0 #555,0 0 5px #000;-webkit-box-shadow:inset 0 1px 0 #555,0 0 5px #000;color:#fff;font-family:"Helvetica Neue",sans-serif;font-size:14px;line-height:1.286;padding:0;text-shadow:0 -1px 0 #111;z-index:2147483647}.__whatfont_button{background:#333;background:-webkit-gradient(linear,0 0,0 100%,from(#555),color-stop(0.5,#333),color-stop(0.51,#333),to(#222));background:-moz-linear-graident(top,#555 50%,#333 1%,#222);border:1px solid #000;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:inset 0 0 1px #aaa,0 1px 0 #111;-moz-box-shadow:inset 0 0 1px #aaa,0 1px 0 #111;-webkit-box-shadow:inset 0 0 1px #aaa,0 1px 0 #111;font-weight:500;padding:3px 6px;text-shadow:0 1px 0 #000;text-align:center}.__whatfont_tip{display:none;font-weight:500;line-height:1;opacity:.9;padding:4px 5px 6px 5px;position:absolute;z-index:2147483647}.__whatfont_control{box-shadow:inset 0 0 1px #555,0 0 2px #000;-moz-box-shadow:inset 0 1px 0 #555,0 0 2px #000;-webkit-box-shadow:inset 0 1px 0 #555,0 0 2px #000;padding:4px 8px;position:fixed;right:10px;top:10px}.__whatfont_exit{cursor:pointer;font-weight:500}.__whatfont_help{color:#eee;font-size:12px}.__whatfont_help strong{font-weight:500}.__whatfont_panel{padding:0;position:absolute;width:260px;z-index:214748364}.__whatfont_panel_title{background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,0.3)),color-stop(0.6,rgba(255,255,255,0.1)),to(rgba(255,255,255,0)));background:-moz-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0));color:#fff;font-size:1.1em;font-weight:bold;padding:4px 16px 4px 10px;position:relative;text-align:center;text-transform:capitalize}.__whatfont_panel_title:before,.__whatfont_panel_title:after{border-style:solid;content:'.';display:block;height:0;position:absolute;text-indent:-30000px;width:0}.__whatfont_panel_title:before{border-color:black transparent;border-width:0 7px 7px 7px;left:7px;top:-8px}.__whatfont_panel_title:after{border-color:#666 transparent;border-width:0 6px 7px 6px;left:8px;top:-6px}.__whatfont_close_button{font-size:18px;bottom:0;cursor:pointer;display:inline-block;line-height:22px;margin:0;height:22px;padding:1px;position:absolute;right:7px;top:0;vertical-align:middle}.__whatfont_close_button:hover{color:#aaa}.__whatfont_panel_content{overflow:hidden;padding-bottom:10px;-webkit-animation:slideDown .4s 0 1 ease-in-out}.__whatfont_clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.__whatfont_panel_content .__whatfont_panel_label,.__whatfont_panel_content div.__whatfont_panel_label,.__whatfont_panel_content dt.__whatfont_panel_label{color:#aaa;font-size:12px;font-weight:bold;line-height:1.5;text-shadow:0 -1px 0 black}.__whatfont_panel_content ul.__whatfont_panel_properties>li{border-bottom:1px solid #000;border-top:1px solid #4a4a4a;margin:0 6px;padding:5px 4px}.__whatfont_panel_content ul.__whatfont_panel_properties>li:first-child{border-top:0;margin-top:0;padding-top:0}.__whatfont_panel_content ul.__whatfont_panel_properties>li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.__whatfont_panel_content .__whatfont_panel_value,.__whatfont_panel_content div.__whatfont_panel_value,.__whatfont_panel_content dt.__whatfont_panel_value{font-weight:500;text-shadow:0 1px 0 black}.__whatfont_panel_content .__whatfont_fniu{text-decoration:line-through}.__whatfont_panel_content .__whatfont_fiu{font-style:italic}.__whatfont_panel_content .__whatfont_size{float:left;width:48.6%;zoom:1}.__whatfont_panel_content .__whatfont_line_height{margin-left:50%;width:48.6%;zoom:1}.__whatfont_highlighted{cursor:default!important}.__whatfont_panel dt.__whatfont_typeface{color:white;font-size:16px}.__whatfont_type_preview{background:#444;box-shadow:0 0 2px #555,inset 0 0 2px #111;-moz-box-shadow:0 0 2px #555,inset 0 0 2px #111;-webkit-box-shadow:0 0 2px #555,inset 0 0 2px #111;border:1px solid #111;color:#eee;font-size:1.25em;margin:.25em 0;overflow:hidden;padding:5px 10px;text-shadow:none;-webkit-font-smoothing:subpixel-antialiased}.__whatfont_panel_content .__whatfont_font_services{line-height:1;text-align:right}ul.__whatfont_font_service{display:inline-block;list-style-type:none;margin:0;padding:0}ul.__whatfont_font_service li{display:inline-block;margin:0;padding:0}.__whatfont_service_icon{color:white;display:inline-block;-webkit-mask-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,1)),to(rgba(255,255,255,0.6)))}.__whatfont_service_icon:hover{cursor:pointer}.__whatfont_panel_content .__whatfont_panel_tools{color:#eee;font:bold 11px "Lucida Grande","Lucida Sans Unicode",verdana,sans-serif;line-height:12px;margin:12px 6px 0;padding:0 4px}.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_panel_tools_left{float:left;width:49.5%}.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_panel_tools_right{margin-left:50%;text-align:right}.__whatfont_panel_content .__whatfont_color_info_sample{border:1px solid #666;display:inline-block;height:12px;margin-right:6px;width:12px;-webkit-transition:border-color .2s;-moz-user-select:none;-webkit-user-select:none}.__whatfont_panel_content .__whatfont_color_info_sample:hover{border-color:#bbb}.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_tweet_icon{background:url("img/tweet.png") no-repeat left top;display:inline-block;margin:0;opacity:.7;padding-left:22px;-webkit-transition:opacity .3s}.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_tweet_icon:hover{opacity:1} |
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
function _whatFont(){var b,j,d,h,f,m,l,g;j={STYLE_PRE:"__whatfont_",CSS_URL:"//cdn.rawgit.com/berstend/80bb7c04d620fda1e83fe6c8ebcee6d9/raw/bc8c0ab71463f20d24a4ce398e96733333d606d8/wf.css",LINK:null,init:function(){if(j.CSS_URL)j.LINK=b("<link>").attr({rel:"stylesheet",href:j.CSS_URL}).appendTo("head")},restore:function(){b(j.LINK).remove()},getClassName:function(a){a=typeof a==="string"?[a]:a;return j.STYLE_PRE+a.join(" "+j.STYLE_PRE)}};d={ALPHABET:"abcdefghijklmnopqrstuvwxyz",FILLSTYLE:"rgb(0,0,0)",HEIGHT:50,SIZE:40,TEXTBASELINE:"top",WIDTH:600,HISTORY:{},init:function(){d.CANVAS_SUPPORT= | |
!!b("<canvas>")[0].getContext},restore:function(){},mkTextPixelArray:function(a){var c=b("<canvas>")[0],e=c.getContext("2d");c.width=d.WIDTH;c.height=d.HEIGHT;e.fillStyle=d.FILLSTYLE;e.textBaseline=d.TEXTBASELINE;e.font=a.style+" "+a.variant+" "+a.weight+" "+d.SIZE+"px "+a.family;e.fillText(d.ALPHABET,0,0);return e.getImageData(0,0,d.WIDTH,d.HEIGHT).data},sameArray:function(a,b){var e=d.WIDTH*d.HEIGHT*4,k;for(k=0;k<e;k+=1)if(a[k]!==b[k])return!1;return!0},fontInUse:function(a){var c=a.family.split(","), | |
e=d.mkTextPixelArray(a.family),k=0,n;for(n=c.length;k<n;k+=1){var i=d.mkTextPixelArray(c[k]);if(d.sameArray(e,i)&&d.sameArray(d.mkTextPixelArray({style:a.style,variant:a.variant,weight:a.weight,size:a.size,family:c[k]+",serif"}),d.mkTextPixelArray({style:a.style,variant:a.variant,weight:a.weight,size:a.size,family:c[k]+",sans-serif"})))return b.trim(c[k])}return"(default font)"},firstFont:function(a){return b.trim(a.split(",")[0])},detect:function(a){a={family:b(a).css("font-family"),style:b(a).css("font-style"), | |
variant:b(a).css("font-variant"),weight:b(a).css("font-weight"),size:b(a).css("font-size")};return d.HISTORY[a.family]=d.HISTORY[a.family]||d.CANVAS_SUPPORT?d.fontInUse(a):d.firstFont(a.family)},weight:function(a){return b(a).css("font-weight")},style:function(a){return b(a).css("font-style")},variant:function(a){var b={bold:"Bold"}[d.weight(a)]||d.weight(a),a={italic:"Italic",oblique:"Oblique"}[d.style(a)]||d.style(a);return b==="normal"&&a==="normal"?"Regular":b==="normal"?a:a==="normal"?b:b+" "+ | |
a},getFontStyle:function(a){return{"font-family":b(a).css("font-family"),"font-style":b(a).css("font-style"),"font-weight":b(a).css("font-weight")}}};g={CSS_NAME_TO_SLUG:{},FONT_DATA:{},SERVICES:{},init:function(){g.typekit();g.google()},typekit:function(){var a=function(){var a=null;b("script").each(function(){var b=this.src.match(/use\.typekit\.com\/(.+)\.js/);if(b)return a=b[1],!1});return a}();a&&b.getJSON("https://typekit.com/api/v1/json/kits/"+a+"/published?callback=?",function(a){if(!a.errors)g.SERVICES.typekit= | |
a.kit,b.each(a.kit.families,function(a,c){b.each(c.css_names,function(a,b){g.CSS_NAME_TO_SLUG[b.toLowerCase()]=c.slug});g.FONT_DATA[c.slug]=g.FONT_DATA[c.slug]||{name:c.name,services:{}};g.FONT_DATA[c.slug].services.Typekit={id:c.id,url:"http://typekit.com/fonts/"+c.slug}})})},google:function(){b("link").each(function(a,c){var e=b(c).attr("href");e.indexOf("fonts.googleapis.com/css?")>=0&&(e=e.match(/\?family=([^&]*)/)[1].split("|"),b.each(e,function(a,b){var c=b.split(":")[0],e=c.replace(/\+/g," "), | |
d=e.replace(/ /g,"-").toLowerCase();g.CSS_NAME_TO_SLUG[e]=d;g.FONT_DATA[d]=g.FONT_DATA[d]||{name:e,services:{}};g.FONT_DATA[d].services.Google={url:"http://www.google.com/webfonts/family?family="+c}}))})},getFontDataByCSSName:function(a){a=a.replace(/^"|'/,"").replace(/"|'$/,"");return(a=g.CSS_NAME_TO_SLUG[a])&&g.FONT_DATA[a]?g.FONT_DATA[a]:null},getFontNameByCSSName:function(a){a=a.replace(/^"|'/,"").replace(/"|'$/,"");return(a=g.CSS_NAME_TO_SLUG[a])&&g.FONT_DATA[a]?g.FONT_DATA[a].name:null}};h= | |
{TIP:null,init:function(){h.TIP=b.createElem("div",["tip","elem"],"");b(h.TIP).appendTo("body");b("body *:visible").mousemove(h.update);b("body").mouseout(h.hide)},restore:function(){b(h.TIP).remove();b("body :visible").unbind("mousemove",h.update);b("body").unbind("mousemove",h.update);b("body").unbind("mouseout",h.hide)},hide:function(){b(h.TIP).hide()},updateText:function(a){b(h.TIP).text(a).css("display","inline-block")},updatePos:function(a){b(h.TIP).css({top:a.pageY+12,left:a.pageX+12})},updateTextPos:function(a, | |
b){h.updateText(a);h.updatePos(b)},update:function(a){this.tagName==="IMG"?h.updateTextPos(d.detect(this)+" (May be incorrect on images)",a):this.tagName==="EMBED"?h.updateTextPos(d.detect(this)+" (May be incorrect on Flash)",a):h.updateTextPos(d.detect(this),a);a.stopPropagation()}};f={PANELS:[],FONT_SERVICE_ICON:{},init_tmpl:function(){f.tmpl=function(){var a=b('<div class="elem panel"><div class="panel_title"><span class="title_text"></span><a class="close_button" title="Close">×</a></div><div class="panel_content"><ul class="panel_properties"><li><dl class="font_family"><dt class="panel_label">Font Family</dt><dd class="panel_value"></dd></dl></li><li><div class="size_line_height clearfix"><dl class="size section"><dt class="panel_label">Font Size</dt><dd class="panel_value"></dd></dl><dl class="line_height"><dt class="panel_label">Line Height</dt><dd class="panel_value"></dd></dl></div></li><li class="panel_no_border_bottom"><dl class="type_info clearfix"><dt class="panel_label"></dt><dd class="type_preview">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</dd></dl><div class="font_services panel_label" style="display:none;">Font Served by </div></li></ul><div class="panel_tools clearfix"><div class="panel_tools_left"><div class="color_info"><a title="Click to change color format" class="color_info_sample"> </a><span class="color_info_value"></span></div></div><div class="panel_tools_right"><a href="https://twitter.com/share" class="tweet_icon" target="_blank">Tweet</a></div></div></div></div>'); | |
return function(){return a.clone()}}()},init:function(){b("body :visible").click(f.pin);f.init_tmpl();f.FONT_SERVICE_ICON.Typekit=b("<span>").addClass("service_icon service_icon_typekit").text("Typekit");f.FONT_SERVICE_ICON.Google=b("<span>").addClass("service_icon service_icon_google").text("Google Web Fonts")},restore:function(){b("body :visible").unbind("click",f.pin);b.each(f.PANELS,function(a,c){b(c).remove()})},convertClassName:function(a){a.find("*").add(a).each(function(a,e){var d=b(e).attr("class"); | |
if(d=d===""?"basic":d+" basic")d=d.split(" "),b(e).attr("class",j.getClassName(d))});return a},typePreview:function(a,c){b(c).find(".type_preview").css(d.getFontStyle(a));return c},fontService:function(a,c){var e=d.detect(a),e=g.getFontDataByCSSName(e),k;k=b("<ul>").addClass("font_service");e?(b.each(e.services,function(a,c){b("<li>").append(b("<a>").append(b(f.FONT_SERVICE_ICON[a]).clone()).attr("href",c.url).attr("target","_blank")).appendTo(k)}),b(c).find(".font_services").append(k).show()):b(c).find(".font_services").hide(); | |
return c},fontFam:function(a,c){var e=b(a).css("font-family").replace(/;/,"").split(/,\s*/),k=d.detect(a),h=!1,i;ff=b(a).css("font-family");fiu=d.detect(a);ff=ff.replace(/;/,"").split(/,\s*/);fiuFound=!1;for(i=0;i<e.length;i+=1)if(e[i]!==k)e[i]="<span class='fniu'>"+e[i]+"</span>";else{e[i]="<span class='fiu'>"+e[i]+"</span>";h=!0;break}e=e.join(", ")+";";h||(e+=" <span class='.fiu'>"+k+"</span>");e="<div class="+j.getClassName("fontfamily_list")+">"+e+"</div>";b(c).find(".font_family>dd").html(e); | |
return c},sizeLineHeight:function(a,c){var e=b(a).css("font-size"),d=b(a).css("line-height");b(c).find(".size>dd").text(e);b(c).find(".line_height>dd").text(d);return c},color:function(a,c){var e=b(a).css("color"),d=b(c).find(".color_info_sample"),h=b(c).find(".color_info_value"),i,f,g;e.indexOf("rgba")!==-1?b(c).find(".color_info").hide():(i=e.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/),f=parseInt(i[1],10).toString(16),g=parseInt(i[2],10).toString(16),i=parseInt(i[3],10).toString(16), | |
f=f.length===1?"0"+f:f,g=g.length===1?"0"+g:g,i=i.length===1?"0"+i:i,hex_color="#"+f+g+i,colors=[e,hex_color],color_type=0,d.css("background-color",e).click(function(a,b,c){return function(e){b=(b+1)%a.length;c.text(a[b]);e.preventDefault();return!1}}(colors,color_type,h)).click())},tweet:function(a,c){var e=b(c).find(".tweet_icon"),h=e.attr("href"),f=d.detect(a),f=g.getFontNameByCSSName(f)||f;h+="?text="+encodeURIComponent("I like this typography design with "+f+".")+"&via=What_Font";e.attr("href", | |
h)},panelContent:function(a,c){b(["typePreview","fontService","fontFam","sizeLineHeight","color","tweet"]).each(function(b,d){f[d](a,c)})},panelTitle:function(a,c){var e=d.detect(a),e=(g.getFontNameByCSSName(e)||e)+" - "+d.variant(a);b(c).find(".title_text").html(e).css(d.getFontStyle(a));(function(a){b(a).find(".close_button").click(function(c){b(a).remove();c.stopPropagation();return!1})})(c);return c},get:function(a){var c=f.tmpl();f.panelTitle(a,c);f.panelContent(a,c);f.convertClassName(c);b(c).click(function(){b(this).find("*").css("-webkit-animation", | |
"none");b(this).detach();b(this).appendTo("body")});return c},pin:function(a){var c;h.hide();c=f.get(this);b(c).css({top:a.pageY+12,left:a.pageX-13}).appendTo("body");f.PANELS.push(c);a.stopPropagation();a.preventDefault()}};m={TOOLBAR:null,init:function(){var a=b.createElem("div","exit","Exit WhatFont");b.createElem("div","help","<strong>Hover</strong> to identify<br /><strong>Click</strong> to pin a detail panel");m.TOOLBAR=b("<div>").addClass(j.getClassName(["elem","control"])).append(a).appendTo("body"); | |
b(a).click(function(){l.restore()})},restore:function(){b(m.TOOLBAR).remove()}};l={shortcut:function(a){if((a.keyCode||a.which)===27)l.restore(),a.stopPropagation()},restore:function(){b("body :visible").unbind("mousemove",l.updateTip);b("body :visible").unbind("click",l.pinPanel);d.restore();m.restore();h.restore();f.restore();j.restore();b("body").unbind("keydown",l.shortcut);_WHATFONT=!1},init:function(){!b&&jQuery&&(b=jQuery);if(typeof _WHATFONT!=="undefined"&&_WHATFONT||!b)return!1;_WHATFONT= | |
!0;b.createElem=function(a,c,e,d){var f=b("<"+a+">"),c=c||[],e=e||"",c=typeof c==="string"?[c]:c;c.push("basic");f.addClass(j.getClassName(c));typeof e==="string"?f.html(e):e.constructor===Array?b.map(e,function(a){return f.append(a)}):f.append(e);f.attr(d);return f[0]};j.init();d.init();h.init();f.init();m.init();g.init();b("body").keydown(l.shortcut)}};return{setJQuery:function(a){b=a},setCSSURL:function(a){j.CSS_URL=a},getVer:function(){return"1.6.1"},init:function(){l.init()},restore:function(){l.restore()}}} | |
(function(){function b(){(function(){var b=document.createElement("script");b.type="text/javascript";b.async=!0;b.src="https://ssl.google-analytics.com/ga.js";var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d);d.onload=function(){_gat._createTracker("UA-23020717-1","wf")._trackEvent("bookmarklet","loaded",j.getVer())}})()}var j,d;j=_whatFont();d=window.document.createElement("script");d.src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";d.onload=function(){j.setJQuery(jQuery.noConflict(!0)); | |
j.init();b()};window.document.getElementsByTagName("head")[0].appendChild(d)})(); |
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
javascript:(function(){var d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','//cdn.rawgit.com/berstend/80bb7c04d620fda1e83fe6c8ebcee6d9/raw/393ec5e5ac1b0d5491ea87f571bcb3afbfdd7357/wf.js?o='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(s)})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment