Font Checker

つくりかけ。横着版。

by itzmeamar

CSS

body {
    margin: 10px; max-width: 900px; background: #eee;
    font-family: KozGoPro-Regular, 'Hiragino Kaku Gothic Pro', meiryo, sans-serif;
}

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

var fontSet = [
    "",
    "sans-serif",
    "serif",
    "courier, 'courier new', Monospase",
    "Arial, Helvitica, Sans-serif",
    "'segoe ui', meiryo, sans-serif",
    "",
    "",
    "",
    ""
    ];

var fontSelector = document.createElement("select");
var option = [];

for (i = 0; i < fontSet.length; i++) {
    option[i] = document.createElement("option");
    option[i].value = i;
    option[i].innerHTML = fontSet[i];
    fontSelector.appendChild(option[i]);
}

document.body.appendChild(fontSelector);

var pre = document.createElement("pre");
var code = document.createElement("code");
code.innerHTML = " ";
pre.appendChild(code);
document.body.appendChild(pre);

var preview = document.createElement("textarea");
preview.innerHTML = "abcdefghijklmnopqrstuvwxyz\n" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ\n" + "0123456789-=~^\|`{}@[];:+*/\?_'()#$%&amp;\n" + "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんぁぃぅぇぉっゃゅょゐゑ" + "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォッャュョヰヱ" + "The quick brown fox jumps over the lazy dog\n" + "色は匂へど　散りぬるを　我が世誰ぞ 常ならむ" + "有為の奥山　今日越えて　浅き夢見じ 酔ひもせず";

document.body.appendChild(preview);

fontSelector.onchange = setFontFamily;

function setFontFamily() {
    preview.style.fontFamily = fontSet[this.value];
    code.innerHTML = "font-family: " + fontSet[this.value];
}