Welcome to Blog Safari

A theme for those who love something unique and creative, created by Template Trackers

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

範例如本站測邊欄的字體縮放,以下為本站採用代碼,

第一步:(後台/版面配置/修改html/展開小裝置範本)

第二步:將下列程式碼插入</head>之前
<script type="text/javascript"> function FontZoom(size)
{ var element = document.getElementsByTagName("div");
var components = new Array(); for(i = 0, j = 0; i < element.length; i++)
{ attribute = element
[i].getAttribute("id"); if(attribute == "main-wrapper")
{ components[j] = element[i]; j++; } } for (i = 0; i < components.length; i++) components[i].style.fontSize = size+'px'; }
</script>


從上面的程式碼來看,原理上呼叫這個函示時,它會去把整個檔案裡標籤是
、屬性 id=main-wrapper 的元素抓出來,然後把該元素的字型大小設成指定的數字。這樣,就可以達到即時動態改變本文字體大小的需求了。 By Abin 從上面引用看來,將屬性id=XX的部分改為想縮放字體的區塊便可達到字體縮放效果 Step2.將下列代碼碼放入適當位置,數字部分可自行調整字型大小!(本站放測邊欄,代碼如下,網址部分請自行上傳圖片或只用文字敘述也行。

<a href="javascript:FontZoom(16)">16</a>
<a href="javascript:FontZoom(14)">14</a>
<a href="javascript:FontZoom(12)">12</a>


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

0 留言 :

張貼留言