<div class="pannel" x-data="{
     text:'這是一段測試文字，你可以隨意從這邊修改文字內容來查看字體演示出的效果',
     size: 16,
     weight: 'initial',
     show: true,
     fontSize() { 
             return `
             font-size:${this.size}px;
             font-weight:${this.weight};
             `;
     },
     switchPannel(){
      return (this.show)?'w-auto':'w-100';                       
     }
 }">
  <button id="menu" x-on:click="show = !show">
    <span x-show="show">關閉</span>
    <span x-show="!show">開啟</span>
    操作視窗
  </button>
  <div class="control" x-show="show">
  <h1>字體大小</h1>
  <input type="number" x-model="size" />
  
  <h1>字體粗細</h1>
  <input id="wi" type="radio" x-model="weight" value="initial" /> <label for="wi">細體</label>
  <input id="wb" type="radio" x-model="weight" value="bold" /> <label for="wb">粗體</label>
  
  <h1>輸入內容</h1>
  <textarea x-model="text" cols="30" rows="10"></textarea>
</div>
  <div class="result" :class="switchPannel">
  <h1>預設字體</h1>
  <p class="show" x-html="text.replaceAll('\n', '<br>')" :style="fontSize"></p>

  <h1>cwTeXKai (Chinese Traditional) 楷體字體</h1>
  <p class="show cwTeXKai" x-html="text.replaceAll('\n', '<br>')" :style="fontSize"></p>

  <h1>Google fonts：cwTeXYen (Chinese Traditional) 圓體字體</h1>
  <p class="show cwTeXYen" x-html="text.replaceAll('\n', '<br>')" :style="fontSize"></p>

  <h1>Google fonts：cwTeXFangSong (Chinese Traditional) 仿宋體字體</h1>
  <p class="show cwTeXFangSong" x-html="text.replaceAll('\n', '<br>')" :style="fontSize"></p>

  <h1>Google fonts：Noto Sans TC (Chinese Traditional) 黑體（思源黑體）</h1>
  <p class="show Noto" x-html="text.replaceAll('\n', '<br>')" :style="fontSize"></p>
    </div>
</div>

@import url('https://fonts.googleapis.com/earlyaccess/cwtexkai.css');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');

body{
  padding:0;
  margin:0;
}

#menu{
position:fixed;
  left:5px;
  top:5px;
  z-index:2;
}

.pannel{
  width:100%;
  height:98vh;
  position:relative;
  overflow:hidden;
}

.control{
  height:100%;
  width:200px;
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  padding:5px;
  border-right:1px solid #000;
  z-index:1;
  padding-top:20px;
}
.result{
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background:#fff;
  padding:5px;
  overflow:hidden;
  overflow-y:auto;
  padding-top:20px;
}

.w-100{
  width:98%;
}

.w-auto{
  width: calc(100% - 230px);
}

@media (max-width: 400px) {
  .result{
    width:96%;
  }
}

textarea{
  width:90%;
  height:200px;
}

h1{
  font-size:20px;
  margin-bottom:5px;
}

.show{
  margin-top:0;
  width:100%;
  border:1px solid #666;
  height:100px;
  padding:5px;
  overflow:auto;
  margin-bottom:20px;
}

.Noto{
font-family: 'Noto Sans TC', sans-serif;
}

.cwTeXFangSong{
font-family: 'cwTeXFangSong', serif;
}

.cwTeXYen{
font-family: 'cwTeXYen', sans-serif;
}

.cwTeXKai{
font-family:  'cwTeXKai', serif;
}