选择合适的字体进行阅读实例页面

效果：

字体设置：

　　唐门外门弟子唐三，因偷学内门绝学为唐门所不容，跳崖明志时却发现没有死，反而以另外一个身份来到了另一个世界，一个属于武魂的世界，名叫斗罗大陆。这里没有魔法，没有斗气，没有武术，却有神奇的武魂。这里的每个人，在自己六岁的时候，都会在武魂殿中令武魂觉醒。武魂有动物，有植物，有器物，武魂可以辅助人们的日常生活。而其中一些特别出色的武魂却可以用来修炼并进行战斗，这个职业，是斗罗大陆上最为强大也是最荣耀的职业——魂师!
　　当唐门暗器来到斗罗大陆，当唐三武魂觉醒，他能否在这片武魂的世界再铸唐门的辉煌？他能否成为这个世界的主宰：神?

代码：

HTML代码：

字体设置：<select id="select">
    <option>请选择</option>
</select>
<p id="target">唐门外...神?</p>

JS代码：

// isSupportFontFamily方法参见页面源代码
// 下面是演示代码
var eleSelect = document.getElementById('select');
var eleTarget = document.getElementById('target');
// 数据
var arrFont = dataFont['windows'].concat(dataFont['OS X'], dataFont['office'], dataFont['open']);
var option = '';
arrFont.forEach(function (obj) {
    var fontFamily = obj.en;
    if (isSupportFontFamily(fontFamily)) {
        option = option + '<option value="'+ fontFamily +'">'+ obj.ch +'</option>';
    }
});
eleSelect.innerHTML = option;
// 事件
eleSelect.addEventListener('change', function () {
    eleTarget.style.fontFamily = eleSelect.value;
});
// 首次匹配
eleTarget.style.fontFamily = eleSelect.value;