html - 在 CSS 中调整静态字体大小的工具或方法？ (全局相对调整，但保持不变)

Question

是否有任何好的技巧或工具可以以相对方式一起调整样式表 (.css) 中的所有字体大小？

具体来说，我使用的是自定义样式表(与 Drupal 主题一起使用)，它具有以绝对值定义的多种字体大小。例如。 13px、18px 等

我不想通过经验为每个像素添加几个像素，而是想找到一个编辑器或脚本来提出一些智能建议来调整它们。

即。轻松改变

body {
...
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
...
}
h1, .h1 {
  ...
  font-size: 23px;
  ...
}
h2, .h2 {
  ...
  font-size: 15px;
  ...
}

到

    body {
...
font-family: Arial, Helvetica, sans-serif;
font-size: **16px**;
...
}
h1, .h1 {
  ...
  font-size: **28px**;
  ...
}
h2, .h2 {
  ...
  font-size: **17px**;
  ...
}

以直观或快速的方式。

注意:- 其他方法是编辑所有字体引用以使用“em”作为单位，或使用 % 大小。例如

BODY {font-size: 100%;}
#intro {font-size: .9em;}
#content {font-size: .8em;}

但是，我正在寻找一种方法来保持这些以像素为单位的绝对值，但同时调整它们。

部分是因为我是 CSS 的新手。但也因为该工作表是由合作者创建的，我想进行最小的更改以避免在不知情的情况下破坏其他一些功能。

细节:Drupal 7，Mac OSX 作为开发机器，已经使用 Firebug 查看变化。
我不介意购买一个工具来执行此操作，尽管我注意到一些最好的 CSS 查看器至少看起来是免费的。

谢谢!大卫

Answer 1

在当前的网络世界中，考虑到移动设备进行设计是很聪明的，字体大小也是需要考虑的因素。该网站不会让您的网站在 480x320 屏幕上显得庞大，而是会将自身降低到浏览器或系统的默认字体大小。

那将是用 em 和 rem 单位(以及我们谈论容器时的 % )编写所有 CSS。 px 应该适用于需要严格坐标才能运行的图形应用程序，并且仅适用于此。

但是，如果您一直使用 px，我相信最近的 jQuery 版本可以像整数一样添加和减去 CSS px 单位。由于这只是一个猜测，我们不应该给出猜测作为答案，这里采用另一种方式，同样使用 jQuery:

function changeAllFonts(ratio) {
  $("*")
    .css(
      "font-size",
      function(index, value) {
        var newVal = parseInt(value.replace("px", ""));
        newVal *= ratio;
        newCSS = newVal + "px";
        return newCSS;
      }
    );
}

这得到value，* { font-size:value的当前CSS值}，所以如果您要使用这种方法，请不要忘记设置一个。只需以这种方式在文档加载时执行函数:

$( ).ready(changeAllFonts(1.8));

...例如。 ratio 参数实际上是当前值的乘数。

祝你好运!