Question

我需要在网站上放置一些字体大小和字体大小的图标。我做了这个已经有一段时间，并且不知道这些天得分是多少。 JQuery是处理这个或纯CSS的首选方法。另外，我是否需要对我的字体大小做任何特殊操作，即使用em而不是px？

提前致谢。

Answer 1

我会通过设置em中的所有单位来解决这个问题。然后，使用简单的javascript一次扩展所有内容是一件简单的事情，如下所示：

    $(function () {
        var fontSize = 1.1;
        $("#larger").click( 
            function () { 
                console.log("click");
                fontSize += .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );

        $("#smaller").click( 
            function () { 
                console.log("click");
                fontSize -= .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );
    });

Answer 2

如果在CSS中使用百分比作为字体大小，则只需在BODY元素上设置一次字体大小，并动态更改该值。其他一切都将成为其中的一部分。

Answer 3

你可以通过几种方式做到这一点。

我更喜欢的是在每次向上或向下点击时切换样式表。你可以使用jQuery或只是常规的'JavaScript'来实现它。

在这种情况下，只要在每个样式表中值的大小上升或下降，无论你使用em还是px都没有区别。

或者，您可以使用JavaScript简单地更改特定元素中文本的大小。再一次，单位并不重要。你只是在改变价值（例如12px到14px，或1em到1.5em）

Answer 4

CSS应该可以正常工作。使用em是因为客户端仍然可以设置字体大小。例如，如果它们的字体大小从14像素开始，则em 2将其设置为28像素。

如果您在px中设置字体大小，那么您将为那些无法控制所选浏览器中字体大小的愤怒客户做好准备。

Answer 5

我会使用纯css（虽然我会使用一些jQuery / js来实时修改BASE字体大小）最好使用ems，尽管它可以像ems级联一样令人沮丧。（稍后会详细介绍）

您需要在可调整大小区域的顶部以像素为单位设置基本字体大小（12px是标准），其下的所有内容都应该是ems。

现在是令人沮丧的部分：请记住，如果你有一个字体大小的div：0.9：em;和一个字体大小为0.8em的嵌套段落，段落将小于预期，因为它的基数将是带有font-size的div：0.9em。

一旦你完成所有这些工作，你需要做的就是改变基本字体大小（以像素为单位）！

Answer 6

通常情况下，我在身体上使用62.5％的东西（所以1em == 10px），然后在ems中定义网站上的所有字体大小。对于字体缩放，我做以下两件事之一：

对主容器div进行jQuery css更改，并设置字体大小百分比。这将以类似的方式更改网站上的所有文字。
对主体执行jQuery类更改以表示新的字体大小。然后你可以使用CSS规则以不同的方式缩放页面的不同部分（仅缩放导航一点，更多的正文复制等）。

在网站上处理字体大小调整的好方法是什么？

6 个答案: