From 4d370762f8a94e0853009f528ceff9d1e60959bb Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 9 Mar 2020 16:05:13 +0300 Subject: [PATCH] Use Font Loading API instead of FontDetect --- public/assets/fonts/fonts.css | 8 -------- public/src/js/assets.js | 10 ++++------ public/src/js/browsersupport.js | 3 +++ public/src/js/lib/fontdetect.min.js | 1 - public/src/js/loader.js | 18 +++++------------- 5 files changed, 12 insertions(+), 28 deletions(-) delete mode 100644 public/assets/fonts/fonts.css delete mode 100644 public/src/js/lib/fontdetect.min.js diff --git a/public/assets/fonts/fonts.css b/public/assets/fonts/fonts.css deleted file mode 100644 index ff2f35b..0000000 --- a/public/assets/fonts/fonts.css +++ /dev/null @@ -1,8 +0,0 @@ -@font-face{ - font-family: TnT; - src: url("TnT.ttf") format("truetype"); -} -@font-face{ - font-family: Kozuka; - src: url("Kozuka.otf") format("truetype"); -} \ No newline at end of file diff --git a/public/src/js/assets.js b/public/src/js/assets.js index b202a13..31e4d8d 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -1,6 +1,5 @@ var assets = { "js": [ - "lib/fontdetect.min.js", "lib/md5.min.js", "loadsong.js", "parseosu.js", @@ -44,7 +43,6 @@ var assets = { "view.css" ], "assetsCss": [ - "fonts/fonts.css", "img/img.css" ], "img": [ @@ -126,10 +124,10 @@ var assets = { "bgm_setsume.mp3", "bgm_settings.mp3" ], - "fonts": [ - "Kozuka", - "TnT" - ], + "fonts": { + "Kozuka": "Kozuka.otf", + "TnT": "TnT.ttf" + }, "views": [ "game.html", "loadsong.html", diff --git a/public/src/js/browsersupport.js b/public/src/js/browsersupport.js index 0ba2898..9927338 100644 --- a/public/src/js/browsersupport.js +++ b/public/src/js/browsersupport.js @@ -47,6 +47,9 @@ function browserSupport(){ var el = document.createElement("a") el.style.setProperty("--a", 1) return el.style.length !== 0 + }, + "Font Loading API": function(){ + return typeof FontFace === "function" } } failedTests = [] diff --git a/public/src/js/lib/fontdetect.min.js b/public/src/js/lib/fontdetect.min.js deleted file mode 100644 index 160b540..0000000 --- a/public/src/js/lib/fontdetect.min.js +++ /dev/null @@ -1 +0,0 @@ -FontDetect=function(){function e(){if(!n){n=!0;var e=document.body,t=document.body.firstChild,i=document.createElement("div");i.id="fontdetectHelper",r=document.createElement("span"),r.innerText="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",i.appendChild(r),e.insertBefore(i,t),i.style.position="absolute",i.style.visibility="hidden",i.style.top="-200px",i.style.left="-100000px",i.style.width="100000px",i.style.height="200px",i.style.fontSize="100px"}}function t(e,t){return e instanceof Element?window.getComputedStyle(e).getPropertyValue(t):window.jQuery?$(e).css(t):""}var n=!1,i=["serif","sans-serif","monospace","cursive","fantasy"],r=null;return{onFontLoaded:function(t,i,r,o){if(t){var s=o&&o.msInterval?o.msInterval:100,a=o&&o.msTimeout?o.msTimeout:2e3;if(i||r){if(n||e(),this.isFontLoaded(t))return void(i&&i(t));var l=this,f=(new Date).getTime(),d=setInterval(function(){if(l.isFontLoaded(t))return clearInterval(d),void i(t);var e=(new Date).getTime();e-f>a&&(clearInterval(d),r&&r(t))},s)}}},isFontLoaded:function(t){var o=0,s=0;n||e();for(var a=0;a0&&o!=s)return!1;s=o}return!0},whichFont:function(e){for(var n=t(e,"font-family"),r=n.split(","),o=r.shift();o;){o=o.replace(/^\s*['"]?\s*([^'"]*)\s*['"]?\s*$/,"$1");for(var s=0;s { - var font = document.createElement("h1") - font.style.fontFamily = name - font.appendChild(document.createTextNode("I am a font")) - this.assetsDiv.appendChild(font) - }) + for(var name in assets.fonts){ + this.addPromise(new FontFace(name, "url('" + gameConfig.assets_baseurl + "fonts/" + assets.fonts[name] + "')").load().then(font => { + document.fonts.add(font) + })) + } assets.img.forEach(name => { var id = this.getFilename(name) @@ -106,7 +105,6 @@ class Loader{ this.afterJSCount = ["blurPerformance", "P2Connection"].length + - assets.fonts.length + assets.audioSfx.length + assets.audioMusic.length + assets.audioSfxLR.length + @@ -131,12 +129,6 @@ class Loader{ this.afterJSCount = 0 - assets.fonts.forEach(name => { - this.addPromise(new Promise(resolve => { - FontDetect.onFontLoaded(name, resolve, resolve, {msTimeout: Infinity}) - })) - }) - assets.audioSfx.forEach(name => { this.addPromise(this.loadSound(name, snd.sfxGain)) })