2009-11-24 20 views
0

我有一些用戶抱怨我的Web應用程序的字體太小而無法閱讀。他們不喜歡嘗試調整瀏覽器的字體設置,因爲當他們使字體變大時,應用程序的尺寸和佈局發生變化。是否有任何現有的工具爲我提供了一種讓最終用戶選擇小/中/大字體大小並使網站的.css更改爲更大字號而不影響頁面佈局的好方法?如何讓我的網站上的字體變得更大,更易於閱讀某些用戶?

+2

一個尷尬的反應是告訴他們使用縮放頁面的web瀏覽器,而不是文本。 – 2009-11-24 19:30:18

+0

因爲這個問題,我建議不要使用EM來佈局,而只使用印刷術。 – 2009-11-24 19:38:34

回答

5

這是我在我的一些網站上使用的代碼。據此適用你的HTML:

HTML:

<span>Font Size: </span> 
<a href="#" onclick="decreaseFontSize();"> 
    <img src="/images/minus.png" alt="Decrease Font Size" /> 
</a> 

<a href="#" onclick="increaseFontSize();"> 
    <img src="/images/plus.png" alt="Increase Font Size" /> 
</a> 

的Javascript:

var min=8; 
var max=18; 
function increaseFontSize() { 
p = document.getElementById("[the id of container w/font you want to size]"); 
if(p.style.fontSize) { 
var s = parseInt(p.style.fontSize.replace("px","")); 
} else { 
    var s = 12; 
} 
if(s!=max) { 
    s += 1; 
} 
p.style.fontSize = s+"px" 
} 
function decreaseFontSize() { 
p = document.getElementById("[the id of container w/font you want to size]"); 
     if(p.style.fontSize) { 
     var s = parseInt(p.style.fontSize.replace("px","")); 
     } else { 
     var s = 12; 
     } 
     if(s!=min) { 
     s -= 1; 
     } 
     p.style.fontSize = s+"px" 
} 
+0

我的腳本完全一樣!我想我修了一下,我必須檢查... – Trick 2009-11-24 19:38:30

+0

這是可能的。我沒有創作這種字體,儘管我在2年前修改了它。現在看它,它可以很容易地合併成一個函數,它需要一個布爾參數告訴你要走哪條路。 – Jason 2009-11-24 19:41:48

+0

*我沒有編寫這個*腳本*。哇。你能告訴我剛喝完咖啡嗎? – Jason 2009-11-24 20:02:02

-1

告訴他們按Ctrl鍵 - +

+0

站立起立! – Trick 2009-11-24 19:36:57

+0

Ctrl + ...不起作用。 S /類型/按 – Matt 2009-11-24 19:44:49

1

如果您的應用程序更改佈局這樣的一種方式,你的用戶發現它不可用,你的CSS一定有一些問題。也許你在設計應用程序時已經假定了一個特定的字體大小,或者只測試了一種字體大小。我建議你嘗試使用不同字體大小的自己的站點來查找佈局問題的位置,然後嘗試修復它們,使其看起來不錯,而不管字體大小如何。

0
var min=8; 
var max=30; 
var reset=14; 

function increase(tag) {  
    var p = document.getElementsByTagName(tag); 
    for(i=0;i<p.length;i++) { 
     if(p[i].style.fontSize) { 
     var s1 = parseInt(p[i].style.fontSize.replace("px","")); 
     } else { 
     var s1 = reset; 
     } 
     if(s1!=max) { 
     s1 += 2; 
     } 
     p[i].style.fontSize = s1+"px" 
    } 
} 

function decrease(tag) { 
    var p = document.getElementsByTagName(tag); 
     for(i=0;i<p.length;i++) { 
      if(p[i].style.fontSize) { 
      var s = parseInt(p[i].style.fontSize.replace("px","")); 
      } else { 
      var s = reset; 
      } 
      if(s!=min) { 
      s -= 2; 
      } 
      p[i].style.fontSize = s+"px" 
     } 
} 


function reset(tag) { 
    var p = document.getElementsByTagName(tag); 
     for(i=0;i<p.length;i++) { 
      p[i].style.fontSize = reset+"px" 
     } 
} 

我改變了這個腳本,所以它通過標籤減少並增加了重置功能。

相關問題