console
<style>
body{ font-size: 16px; background-color: #fff7d9; font-family:minijianxixingkai55387;}
.line{
border:2px solid #666;
border-top: 0;
width: calc(24*17px + 4px);
padding-right: -1px;
}
.word{
border:2px solid #666;
border-left: 0;
width: 24px;
height: 24px;
display: inline-block;
text-align: center;
margin-bottom: 5px;
font-size: 22px;
font-weight:bold;
color:#06f;
}
.word:nth-child(17n){
border-right: 0;
}
*{
box-sizing: border-box;
}
</style>
<div class="line">
</div>
<script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">
$youziku.load("body", "79fdb4787597460bb7c7f39ff03c4a20", "HaTian-SuiXing");
$youziku.draw();
</script>
<script>
let content = parent.location.hash || '\t\t从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。\n\t\tQuasar Framework 可以通过其一流的构建系统、合理的配置和开发者扩展性生成 (可选地和 PWA 互通的) SSR 应用,让你的想法的设计和构建变得轻而易举。你可以在服务端挑选执行超过上百款遵循“Material Design 2.0”的组件,并在浏览器端可用。你甚至可以管理网站的 <meta> 标签。Quasar 是一个基于 Node.js 和 webpack 的开发环境,它可以通过一套代码完成 SPA、PWA、SSR、Electron 和 Cordova 应用的快速开发。'
document.querySelector('.line').innerHTML =
Array.from(
content
.replace(/ /g, ' ')
.replace(/\t/g, ' ')
).map( function(word){
return '<span class="word">' + word + '</span>'
}).join('').replace(/\n/g, '<br/>')
</script>