Last active
January 15, 2022 17:39
-
-
Save letorbi/5177771 to your computer and use it in GitHub Desktop.
This code enforces font-smothing for web fonts even if it's not enabled in the system settings. More info: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser
This file contains hidden or 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
| // Font Smoothie copyright 2013 Torben Haase <http://pixelsvsbytes.com/> | |
| // | |
| // Font Smoothie is free software: you can redistribute it and/or modify it under | |
| // the terms of the GNU Lesser General Public License as published by the Free | |
| // Software Foundation, either version 3 of the License, or (at your option) any | |
| // later version. | |
| // | |
| // Font Smoothie is distributed in the hope that it will be useful, but WITHOUT | |
| // ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS | |
| // FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more | |
| // details. You should have received a copy of the GNU Lesser General Public | |
| // License along with Font Smoothie. If not, see <http://www.gnu.org/licenses/>. | |
| (function() { 'use strict'; | |
| function apply() { | |
| // NOTE Circles through all CSS rules of a sheet and fix them if | |
| // necassary. | |
| function traverseSheet(sheet) { | |
| for (var rule, j = 0; sheet && (rule = sheet.cssRules[j]); j++) { | |
| // NOTE Only affect rules that have a src value (AFAIK | |
| // this is only true for CSSFontFaceRule objects). | |
| if (rule.style && rule.style.src) { | |
| // NOTE Create a new rule where SVG is the preferred | |
| // source format and delete the old rule. | |
| rule.style.src = rule.style.src.replace(/^([^;]*),([^,]*svg[^,;]*)([^;]*)/g, '$2,$1$3'); | |
| // NOTE Opera needs the rule to be deleted and inserted again | |
| // (in that order) to apply it to the document. | |
| if (window.opera) { | |
| var text = rule.cssText; | |
| sheet.deleteRule(j); | |
| sheet.insertRule(text, j); | |
| } | |
| } | |
| traverseSheet(rule.styleSheet); | |
| } | |
| } | |
| try { | |
| // NOTE Safari needs the canvas to be part of the DOM tree to | |
| // return correct alpha values. | |
| var canvas = document.head.appendChild(document.createElement('CANVAS')); | |
| var context = canvas.getContext('2d'); | |
| context.textBaseline = 'top'; | |
| context.font = '32px Arial'; | |
| context.fillText('O', 0, 0); | |
| // NOTE We won't check the alpha values of all canvas pixels, | |
| // but only the one at position (5,8). If font-smoothing is | |
| // off we loop through all CSS rules and fix them. | |
| for (var sheet, i = 0; (context.getImageData(5, 8, 1, 1).data[3] == 255) && (sheet = document.styleSheets[i]); i++) | |
| traverseSheet(sheet); | |
| document.head.removeChild(canvas); | |
| } | |
| catch (e) { | |
| // NOTE Ignore any errors that might occur. | |
| // console.log(e); // DEBUG | |
| } | |
| } | |
| if (document.readyState == 'complete') { | |
| apply(); | |
| } | |
| else { | |
| var f = window.onload; | |
| window.onload = window.onload ? function(evt){f(evt);apply();} : apply; | |
| } | |
| })(); |
This file contains hidden or 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
| // Font Smoothie copyright 2013 Torben Haase <http://pixelsvsbytes.com/> | |
| (function(){function a(){function d(a){for(var c,b=0;a&&(c=a.cssRules[b]);b++){if(c.style&&c.style.src&&(c.style.src=c.style.src.replace(/^([^;]*),([^,]*svg[^,;]*)([^;]*)/g,"$2,$1$3"),window.opera)){var e=c.cssText;a.deleteRule(b);a.insertRule(e,b)}d(c.styleSheet)}}try{var a=document.head.appendChild(document.createElement("CANVAS")),b=a.getContext("2d");b.textBaseline="top";b.font="32px Arial";b.fillText("O",0,0);for(var e,f=0;255==b.getImageData(5,8,1,1).data[3]&&(e=document.styleSheets[f]);f++)d(e); | |
| document.head.removeChild(a)}catch(g){}}if("complete"==document.readyState)a();else{var g=window.onload;window.onload=window.onload?function(d){g(d);a()}:a}})(); |
u can use document.getElementsByTagName('head')[0]
Can you upload the script to CDNs like https://cdnjs.com/?
I'd love a bower version for this as well if you'd like to do the honours... ;)
Yes, a bower or npm version would be awesome.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
IE8 gives a Javascript error: 'document.head' is null or not an object.