読者です 読者をやめる 読者になる 読者になる

latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

日本におけるWebFontの夜明けぜよ(てきとう

WMCache.js を使って、Noto フォントをキャッシュし、レンダリングするテストコードです。 Notoフォントのサイズは16.4MBありますが、キャッシュされているため一瞬(この例では57ms)です。

これで、2015年からはゲームの世界感に沿った WebFont とか使えるんじゃないでしょうか。

function _multiline(fn) { // @arg Function:
                          // @ret String:
    return (fn + "").split("\n").slice(1, -1).join("\n");
}

function addText() {
    document.body.innerHTML += _multiline(function() {/*
<p class="message">
こんにちは日本におけるWebFontの世界。<br />
私は今、WMCache.js でローカルにキャッシュされた<br />16.4MBのWebFont(Noto)を使い、貴方の心に直接語りかけています。
</p>
*/});
}

function addStyleNode(blobURL) {
    var css = _multiline(function() {/*
@font-face {
    font-family: "Noto";
    src: url("WEBFONT_URL");
}
p.message {
    font-family: "Noto";
}
*/}).replace("WEBFONT_URL", blobURL);

    var style = document.createElement("style");
    style.setAttribute("type", "text/css");
    style.innerHTML = css;
    document.head.appendChild(style);
}

function render() {
    var url = "./NotoSansCJKjp-Regular.otf";
    var cache = global.cache; // new WMCache(...)

    cache.getBlobURL(url, function(url, blobURL) {
        addText();
        addStyleNode(blobURL);

        var computedStyle = window.getComputedStyle( document.querySelector(".message") );

        if (computedStyle.fontFamily === "Noto") {
            // OK
        }
    });
}