CSS 增加字体大小答案

【问题标题】：CSS increase font sizeCSS 增加字体大小
【发布时间】：2013-09-10 22:08:45
【问题描述】：

我不是 CSS 专家，但我的任务是增加网站上的字体大小。该站点使用下载的 CSS 主题。正如我所见，有一个文件 main.css 包含字体的定义。在其他 css 文件中，字体大小是使用百分比设置的。

但是，在 main.css 本身中有 102 个单词 font-size 匹配，因为它为所有可能的 html 元素及其组合设置了大小，例如

 body { font-size: 13px; }
 h1 { font-size: 32px; }
 h1.smaller { font-size: 31px; }
 h2 { font-size: 26px; }

等等。

我正在考虑编写一个脚本来提取字体大小$1 的值并将它们替换为$1+1。

一会儿，可能有一个更优雅的解决方案？也许我可以使用 CSS 本身以某种方式重新定义字体大小？

【问题讨论】：

这就是不鼓励使用硬编码像素值的原因。一般来说，最好用em单位代替。然后，您可以在 html 元素的 CSS 文件开头指定一个“baseline”字体大小，所有字体都将从那里缩放。
是的，没错，但我在这里别无选择。我有我所拥有的。
所以您只想执行一次（通过编辑器）？还是以编程方式（通过 JavaScript 或其他方式）？
@xaxa 我建议您现在将它们更改为 em 大小。您可以根据您的脚本想法计算 em 值。
你为什么不把 !important 添加到你的属性中呢？这样你定义的属性就会被考虑。

标签： css

【解决方案1】：

我使用以下 PHP 脚本将所有 font-size: [0-9]+px 值转换为 em：

<?php

$filename = "MyCss.css";

$css = file_get_contents($filename);

$css = preg_replace('/font-size\s*\:\s*([0-9]+)\s*px/ie', '"font-size: " . ($1/16) . "em"', $css);

file_put_contents($filename, $css);

您上面的示例 CSS 变为：

body { font-size: 0.8125em; }
h1 { font-size: 2em; }
h1.smaller { font-size: 1.9375em; }
h2 { font-size: 1.625em; }

然后我建议在 HTML 元素上设置 baseline 字体大小：

html { font-size: 16px; }

然后，如果你想全局影响页面上的所有字体大小，你可以改变这个单一的值，所有使用em单位的字体都会缩放。

如果您愿意，也可以使用百分比，但通常首选 em。

（抱歉，Ruby 是我不知道的少数语言之一）

【讨论】：

哦，太好了！非常感谢！）语言无关紧要。
Em 和百分比就字体大小而言是等效的，唯一的偏好是个人偏好（100% == 1em，120% == 1.2em）。如果您真正想要的是浏览器的默认字体大小（知道如何调整字体大小的用户会更喜欢），则没有理由在 html 元素上设置字体大小。
@cimmanon 在 html 元素上设置字体大小将作为整个页面的基线。如果未设置，则默认为100% == 16px == 1.0em，用户可以使用浏览器的缩放功能进一步缩放，如您所述。因此，通过设置HTML { font-size: 12px; }，然后1.0em 变为12px 而不是16px，因为它都是相对于后代的。
也就是说，上面处理 css 后代的代码可能会产生一些影响。例如不考虑场景：table { font-size: 20px; } td { font-size: 15px; }。上面的代码会导致它变成table { font-size: 1.25em; /* 20px */} td { font-size: 0.9375em; /* 18.75px */}，因为 em 是相对于它们的父级的。
这一切都很好，除了您践踏用户偏好的部分。有很多人希望将字体大小增加到可以阅读的内容，而不必求助于缩放。（见：filamentgroup.com/lab/…、csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided、ia.net/blog/100e2r、smashingmagazine.com/2011/10/07/…）