logo标签列表

文本大小调整功能

css
4
我需要制作一个控件，其中有三个大小不同的T被链接在一起。通过单击每个T，文章文本将适当地调整为小号、中号或大号字体。
有人知道我该如何做吗？还有，你知道一个使用这种文本调整功能的网站吗？
提前感谢。
更新：感谢所有的回复。我继续在Google上搜索，发现这个网站有潜力：http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript 它使用JS动态调整字体，这正是我想做的。但如果可能的话，我仍然更愿意在CSS中完成这个功能 - 有人能帮忙吗？
1
欢迎来到StackOverflow！很棒的第一个问题。 - Sampson
5个回答
5

您可以使用CSS实现此操作 - 如果您的所有字体都是百分比，则可以为文档设置一个字体大小，所有子元素将是该字体大小的百分比。

1
我很想用CSS来完成这个。你能进一步解释一下吗？我的字体是.em格式的，我该将T链接到哪里？ - Cindy
1
首先，您需要了解em实际上是基于百分比的字体大小（1.5em是父元素设置的字体大小的1.5倍）。现在，让我进一步解释：对于您想要受T大小更改影响的文本，请将它们的字体大小设置为百分比（或使用em）。它们应该都有相同的父级，所以这应该很容易。当用户单击给定大小的T时，更改父级的字体大小，然后完成。 - Gabriel McAdams
1

这种方法无法仅使用CSS实现。您需要将CSS与JavaScript结合使用。

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

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

需要记住以下几点：

  • 用户可以为其浏览器设置最小字体大小，因此如果您将“small”大小设置为低于该设置，则该用户永远不会看到您的最小字体设置。
  • 您需要尝试一下，看看如果用户具有较大的默认字体大小设置，您的布局会如何。

希望这可以帮助您，祝您好运！

0
使用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来更改大小。您将拥有三个CSS类别，分别命名为“small”、“medium”和“large”：

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

当用户点击小“T”时，将调用setTextToSmall()函数。它会向所有已经有'text-to-resize'类的元素添加'small'类，并删除'medium'和'large'类。所以在点击之前你可能会有这样的情况：
<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()。然而，该方法在任何IE版本中都不存在。
OP从未提到或标记JQuery，它虽然普遍存在，但并不意味着没有更好的框架。那么纯JavaScript怎么样？ - Murali VP
我完全不了解任何 JQuery。除非这是一种复制/粘贴类型的代码，否则这对我没有帮助。感谢你的回复。 - Cindy
是的，不要使用jQuery，它偏离了JavaScript代码，我强烈建议任何人不要使用类似jQuery的东西，除非你真的找不到自己在JavaScript、DOM和跨浏览器错误方面的路。 - DoctorLouie
我承认，如果她不知道或者不想使用jQuery，那么我的答案就没有帮助了，但是对于Cindy尝试做的这种事情来说，jQuery是非常完美的选择。建议她不要使用jQuery仅仅因为它是一个框架，就好比说因为命令行足够用，所以不应该使用Windows一样。 - Darrell Brogdon
@LouieRd - DrLouie: 嗯，大多数人都不知道如何操作DOM，这就是为什么jQuery（和其他库）是如此重要的原因。 @Darrell：虽然你的回答很努力，但你没有提供任何解释！你意识到你的代码对于不了解jQuery API的人来说有多么陌生吗？一些关于如何实现OPs请求的解释可能会有所帮助。 - Crescent Fresh
@Darrell 谢谢你进一步解释。我现在更理解了 :) - Cindy
0

您可以根据用户点击的“t”来附加不同的CSS文件（更改段落文本大小）。我相信有更好的方法，但这样做可以完成工作！

谢谢mr1989。我不认为我想要附加不同的文件 :) - Cindy
-1

您可以使用

("fontSize",+=3px)

如果你不想有限制。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接