Font Checker

つくりかけ。ひねくれ版。

by ethertank

HTML

<select id="fontSelector" onchange="setFontFamily(this.value)">

    <option value="A">courier, 'courier new', sans-serif</option>
    <option value="B">arial, helvitica, sans-serif</option>
    <option value="C">'segoe ui, 'meiryo, sans-serif</option>

</select>

<pre><code id="code">(･&omega;･｀)</code></pre>

<textarea id="preview">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789-=~^\|`{}@[];:+*/\?_'()#$%&amp;

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんぁぃぅぇぉっゃゅょゐゑ
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォッャュョヰヱ

The quick brown fox jumps over the lazy dog

色は匂へど　散りぬるを　我が世誰ぞ 常ならむ
有為の奥山　今日越えて　浅き夢見じ 酔ひもせず
</textarea>
</section>

CSS

body {
    margin: 10px; max-width: 600px; background: #eee;
    font-family: KozGoPro-Regular, 'Hiragino Kaku Gothic Pro', meiryo, sans-serif;
}
body > h1 { font-size: 1.5em;}
h1, h2 { font-weight: 300; margin: 5px 0; }

select { min-width: 90%; }

pre code { display: block; background: #fff; overflow-x: auto; padding: 3px; margin: 0.5em 0; }
textarea{ min-height: 21em; width: 100%; resize: vertical; }
select, textarea, pre code { border: 1px solid #000; }

JavaScript

function setFontFamily(v) {
    var fontSet = {
        A: " courier, 'courier new', Monospase ",
        B: " Arial, Helvitica, Sans-serif ",
        C: " 'segoe ui', meiryo, sans-serif ",
        D: "",
        E: "",
        F: "",
        G: ""
    };

    preview = document.getElementById("preview");
    code = document.getElementById("code");
    preview.style.fontFamily = fontSet[v];
    code.innerHTML = "font-family: " + fontSet[v];
}