在頁面上實現變換字體大小的方法《一》

每一個網站的設計不同,風格樣式、配色排版都不一樣,網頁上的文字當然也有大有小!視力比較差的使用者對於文字較小的網站內容常常會看不清楚,若是網站為了整體美觀而加入了viewport標籤,那麼使用者在手機上也無法運用縮放來放大檢視內容。
今天介紹這款 CSS 與 JS 結合的特效代碼,不需要下載任何元件,只要將其代碼複製下來並置入於<body></body>之間,就能完美呈現自由變換字體大小。
在下方範例裡,按下「大」「中」「小」來看看效果吧!
  

易思生活-讓生活更有意思
<style type="text/css">
<!--
body {font-size:18px}
-->
</style>
<script type=text/javascript>
function $(xixi) {
return document.getElementById(xixi);
}
//轉換字元
function doZoom(size){
	if(size==16){
		$("contentText").style.fontSize = size + "px";
		$("fs16").style.display = "";
		$("fs18").style.display = "none";
		$("fs20").style.display = "none";
	}
	if(size==18){
		$("contentText").style.fontSize = size + "px";
		$("fs16").style.display = "none";
		$("fs18").style.display = "";
		$("fs20").style.display = "none";
	}
	if(size==20){
		$("contentText").style.fontSize = size + "px";
		$("fs16").style.display = "none";
		$("fs18").style.display = "none";
		$("fs20").style.display = "";
	}
}
</script>
<div class=fontSize id=fs16 style="DISPLAY: none"><a 
href="javascript:doZoom(20)">大</a> <a 
href="javascript:doZoom(18)">中</a> <span>小</span></div>
<div class=fontSize id=fs18><a 
href="javascript:doZoom(20)">大</a> <span>中</span> <a 
href="javascript:doZoom(16)">小</a></div>
<div class=fontSize id=fs20 style="DISPLAY: none"><span>大</span> <a 
href="javascript:doZoom(18)">中</a> <a 
href="javascript:doZoom(16)">小</a></div><br />
<div id=contentText>易思生活-讓生活更有意思</div>
也可以按這裡直接下載我們提供的 font-size.html 自行編輯修改。
933 Bytes / RAR
修改要顯示的預設文字尺寸
修改要顯示的文字尺寸
Read More
More Detail