Download raw (2.2 KB)
/* Multiple color font Copyright 2012 Eric Schrijver / OSP http://ospublish.constantvzw.org/workshop/write-me-a-shadow/ Based on colorfont.js: Copyright 2011 Manufactura Independente (Ana Carvalho & Ricardo Lafuente) http://manufacturaindependente.com/colorfont/ Licensed under the terms of the WTFPL. http://sam.zoy.org/wtfpl/ Usage: In your HTML, for the element that you want to appear in multiple colours, specify an attribute called ‘data-fonts’. The attribute takes a list in JSON format, the elements of which are lists of a font-file and a colour. For example: <h2 data-fonts='[["example-fonts/SansGuiltExtrude.otf", "#000"], ["example-fonts/SansGuiltMB.otf","#00039C"]]'>Workshop ERBA Valence 3-4 mai 2012</h2> */ $(document).ready(function(){ $("[data-fonts]").each(function() { $(this).css({position:'relative'}); var fonts = $.parseJSON($(this).attr("data-fonts")); var text = $(this).html(); var html = ' '; $.each(fonts, function(index, fontobject){ // fontname is fontfile without path and extension: var fontfile = fontobject[0]; var font = fontobject[0].split('/').pop().split('.').slice(0,-1).join('.'); var colour = fontobject[1]; html += '<span class="colorfont-overlay" id="' + font + '"style="position: absolute; top:0px; left:0px; right:0px; font-family:' + font + '; color:' + colour + '">' + text + '</span>'; var fontface = '@font-face {\n'; fontface += " font-family: '" + font + "';\n"; fontface += " font-weight: normal;\n"; fontface += " src: url('" + fontfile + "');\n"; fontface += "}\n"; $("body").prepend("<style>" + fontface + "</style>"); }) $(this).html(html); // http://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements var heights = $(this).children("span").map(function () { return $(this).height(); }).get(); console.log(heights); var maxHeight = Math.max.apply(null, heights); console.log(maxHeight); $(this).css('height', maxHeight); }); });