我怎样才能使我的网站上的字体更大，让某些用户更容易阅读？答案

【问题标题】：How can I make fonts on my website bigger and easier to read for some users?我怎样才能使我的网站上的字体更大，让某些用户更容易阅读？
【发布时间】：2012-01-17 04:51:20
【问题描述】：

我有一些用户抱怨我的 Web 应用程序的字体太小而无法阅读。他们对尝试调整浏览器上的字体设置不满意，因为当他们使字体变大时，应用程序的尺寸和布局会发生变化。是否有任何现有工具可以为我提供一种让最终用户选择小/中/大字体大小并将网站的 .css 更改为更大字体大小而不影响页面布局的好方法？

【问题讨论】：

一个尖刻的反应是告诉他们使用缩放页面的网络浏览器，而不是文本。
由于这个问题，我建议不要将 EM 用于布局，而仅用于排版。

标签： jquery html css layout

【解决方案1】：

这是我在一些网站上使用的代码。相应地应用您的 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" 
}

【讨论】：

有可能。我没有创作这种字体，虽然我可能在 2 年前对其进行了修改。现在看，它可以很容易地合并到一个函数中，该函数需要一个布尔参数来告诉你要走哪条路。
我没有创作这个 *script。哇。你能告诉我我刚喝完咖啡吗？
:) 可以看出 :) 我已经添加了我更改的内容作为答案。

【解决方案2】：

如果您的应用程序的布局发生变化，以至于您的用户发现它无法使用，那么您的 CSS 一定有问题。也许您在设计应用程序时假设了特定的字体大小，或者仅使用一种字体大小进行了测试。我建议您尝试使用您自己的网站使用不同的字体一段时间，以找出布局的问题所在，然后尝试修复它们，使其无论字体大小如何都看起来不错。

【讨论】：

【解决方案3】：

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"
       } 
}

我更改了这个脚本，使其按标签减少并添加了重置功能。

【讨论】：

【解决方案4】：

告诉他们按Ctrl-+

【讨论】：