Question

我需要制作一个具有三个不同大小的T的控件。通过单击每个T，文章文本将适当地调整为小，中或大字体。

有谁知道我怎么做到这一点？另外，您是否知道使用此类文本调整大小功能的网站？

提前致谢。

更新：感谢您的所有回复。我进一步挖掘了Google，发现它有潜力：http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript它使用JS来动态调整字体大小，这正是我想要做的。如果可能的话，我宁愿在CSS中这样做 - 有人吗？

Answer 1

您可以使用CSS执行此操作 - 如果您的所有字体都是百分比，那么您可以为文档设置一个字体大小，所有子项都将占该字体的百分比。

Answer 2

该方法不能仅使用CSS实现。您需要将CSS与JavaScript结合使用。

最好的方法是使用百分比或ems设置页面的默认主体大小。您可以为页面容器或<body>标记的较大和较小字体大小创建两个额外的类。这些类可以使用更大和更小的百分比/ ems，或者您可以使用关键字：xx-small，x-small，small，larger，x-large，xx-large。 （注意：我遗漏的越来越小，因为它们似乎不起作用）。

然后使用JavaScript，您可以将onclick事件附加到您的三个T上，这将动态地将所需的类添加到页面容器（或<body>标记）。如果他们点击中间的T，那么应用的大/小类将被删除，将页面返回到它的默认字体大小。

要记住的一些事项：

用户可以为其浏览器设置最小字体大小，因此，如果将“小”尺寸设置为低于该设置，则该用户将永远不会看到您的最小字体设置。
如果用户的默认字体大小设置较大，则需要尝试布局的行为方式。

希望这会有所帮助并祝你好运！

Answer 3

您可以附加不同的CSS文件，具体取决于该用户点击的内容（更改段落文字大小）。我确信有更好的方法，但这样就可以完成任务！

Answer 4

使用jQuery你可以这样做：

$(function(){
  $('#smallT').click(setTextToSmall);
  $('#mediumT').click(setTextToMedium);
  $('#largeT').click(setTextToLarge);
});

function setTextToSmall(evt)
{
  $('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}

// Have similar setTextTo.. functions for Medium and Large here

为了澄清，这实际上确实使用CSS来改变大小。你会有三个名为'small'，'medium'和'large'的CSS类：

.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }

当用户点击小“T”时，会调用setTextToSmall()函数。它将类“small”添加到已经具有“text-to-resize”类的所有元素，并删除“medium”和大类。所以在点击之前你可能会有这个：

<div class="text-to-resize">Some sample text</div>

点击后你会有这个：

<div class="text-to-resize small">Some sample text</div>

如果您想将此应用于网页上的每个元素，那么您只需将setTextToSmall()更改为以下内容：

function setTextToSmall(evt)
{
  $().addClass('small').removeClass('medium').removeClass('large');
}

jQuery（或其他框架）的好处是它抽象出了在不同浏览器中非常棘手的DOM。例如，要在直接的Javascript中执行此操作，您可能会本能地使用document.getElementsByClassName()。但是，该方法doesn't exist in any version of IE。

Answer 5

您可以使用

("fontSize",+=3px)

如果您不想限制。

文字大小调整功能

5 个答案: