funtest: 動態調整字體大小

網站字體大小及版面配置多由站長喜好設定，有因字體大小造成瀏覽不便或因螢幕解析差異而在用滑鼠滾輪+ctrl時造成版面破碎，因此體貼讀者讓使用者可自行選擇字體大小而使瀏覽更加輕鬆便是站長責無旁貸的。

範例如本站測邊欄的字體縮放

此修改有兩方式，以下為本站採用代碼，兩者差異在於是否在內文增加<span>額外的標籤，至於適用哪種方式端看個人模版

參考文章： Abin's Tech Note-動態調整文章字體大小

修改開始（後台/版面配置/修改html/展開小裝置範本）

Step1.將下列程式碼插入模版<head>或<body>前或Javascript區段內（本模版插入</head>後及<body>前）

<script type='text/javascript'>
function FontZoom(size)
{
  var element = document.getElementsByTagName("div");
  var components = new Array();
  for(i = 0, j = 0; i &lt; element.length; i++) {
    attribute = element[i].getAttribute("id");
    if(attribute == "main-wrapper") {
      components[j] = element[i];
      j++;
    }
  }
  for (i = 0; i &lt; components.length; i++)
    components[i].style.fontSize = size+'px';
}
</script>

從上面的程式碼來看，原理上呼叫這個函示時，它會去把整個檔案裡標籤是 <div>、屬性 id=main-wrapper 的元素抓出來，然後把該元素的字型大小設成指定的數字。這樣，就可以達到即時動態改變本文字體大小的需求了。 By Abin

從上面引用看來，將屬性id=XX的部分改為想縮放字體的區塊便可達到字體縮放效果

Step2.將下列代碼碼放入適當位置，數字部分可自行調整字型大小！（本站放測邊欄，代碼如下，網址部分請自行上傳圖片或只用文字敘述也行（圖片下載）

<a href="javascript:FontZoom(16)" title="字體放大(16px)"><img alt="Large Font Size" src="Fontgroesser.gif網址"/></a>
<a href="javascript:FontZoom(14)" title="字體適中(14px)"><img alt="Default Font Size" src="Fontnorm.gif網址"/></a>
<a href="javascript:FontZoom(12)" title="字體縮小(12px)"><img alt="Small Font Size" src="Fontkleiner.gif網址"/></a>