允许用户更改网页字体大小 - ASP.Net答案

【问题标题】：Allow user to change the web page font sizes - ASP.Net允许用户更改网页字体大小 - ASP.Net
【发布时间】：2010-11-15 22:18:25
【问题描述】：

我想在我的网站上提供一项功能，让用户通过单击某些内容（例如 + 和 - 图像等）来增加和减小字体大小。不过我也想要：

确保在增加字体大小时，我的网站布局不会混乱
在我的机器上测试场景以确保上述要点

我认为我想要的是一个独立于浏览器字体大小和机器字体大小的解决方案，否则我将无法测试和控制结果

在我的网络应用程序中，我没有对字体大小进行硬编码，但在某些地方我指定了文本框长度，例如宽度 = 50px，我认为需要更改......那么我应该使用什么单位？

我正在考虑使用主题并将标签和文本框的字体大小定义为小、小、大等..不确定这是否可行？

更新：我也在另一个论坛上问过这个问题：http://forums.asp.net/t/1453926.aspx

基本上，从所有答案中，我总结出有两种方法：

使用 em 和 body 字体大小：身体 { 字体大小：62.5%； } p { 字体大小：1.2em； }

当您必须增加/减少字体大小时，只需增加/减少正文字体大小百分比

使用绝对字体大小： css 定义了从 xx-small 到 xx-large 的字体大小范围 (7)，因此您可以定义 font-size: small in css..

我在以下网址找到了一篇关于这些字体大小的好文章： http://meyerweb.com/eric/articles/webrev/199908a.html

然而，这两个选项都不是我想要的。我一直在寻找真正意义上的绝对大小，所以如果我设置字体大小：大，然后我增加浏览器大小，字体大小应该保持不变..现在即使有这些“绝对字体大小”它取决于当前浏览器字体大小。有什么帮助？？？？

【问题讨论】：

标签： asp.net fonts coding-style stylesheet

【解决方案1】：

我会使用 jQuery 来做到这一点。这个问题并不完全相同，但突出显示的答案非常接近您想要实现的目标：

Allow users to change font size in a webpage

这个也挺好的：http://webrocket.ulmb.com/ability，虽然demo有点小裤子

【讨论】：

谢谢..但该问题的答案建议：body { font-size: 62.5%;这是否意味着将其设置为浏览器或操作系统级别配置的大小的 62%..在这种情况下，问题是我无法控制和测试它..我的意思是一个用户的默认字体大小可能是 20 和其他人可能是 12..so...
但是如果没有在 css 中定义实际的字体大小，您唯一可以使用的就是百分比。如果您要将“正常”级别的所有字体设置为特定的像素大小，那么您可以将诸如更小、小、正常、大等类定义为实际像素大小。否则，百分比（或者可能是 em）是实现这一目标的唯一方法。

【解决方案2】：

jQuery，见Easy text resizer with jQuery

【讨论】：

链接已损坏。

【解决方案3】：

您可能想查看一些调查，看看这是否是所需的功能。我认识的大多数人都会使用他们的网络浏览器的内置功能来控制字体大小。在我自己在各种网站上的测试和开发过程中，大多数客户都忽略了网站上的字体大小控制。从长远来看可能会为您节省一些时间:)

如果你发现你确实实现了这一点，最大的担忧是确保你的字体大小在平衡的情况下增加，并且你的布局和 css 设计模式是“流畅的”和“可扩展的”。这实际上有点困难，因为如果网站设计是固定宽度的布局，那么您可能会遇到内容无法再适应的问题，这可能会让您想要完成的工作非常令人沮丧。

如果不是，那么再次确保在元素和它们的字体大小之间保持平衡。不过就个人而言，我会将字体更改留给网络浏览器。大多数浏览器都非常擅长自行操作布局。

【讨论】：

谢谢..这正是我关心的问题..我想确保如果用户通过浏览器增加字体大小，Web 应用程序（由一堆表单组成）不会搞砸......我该怎么做，我知道我的网站是流畅且可扩展的……我没有在我的 Web 应用程序中硬编码任何大小或字体大小

【解决方案4】：

您非常接近解决方案，我知道现在回复此线程为时已晚，但是猜测它可能对遇到此问题的用户有用

简单的 Jquery 选择器使用 css 更改字体大小。

function font_resize(act)
{
    if(act=='small')
    {
        $("body").css("font-size","10px");          
        $("#footer").css("font-size","9px");

    }
    else if(act=='mid')
    {
        $("body").css("font-size","12px");
        $("#footer").css("font-size","11px");

    }
    else if(act=='large')
    {
        $("body").css("font-size","15px");
        $("#footer").css("font-size","14px");

    }
}

【讨论】：