CSS增加字体大小

Question

CSS增加字体大小

10

我不是 CSS 专家，但有任务要在网站上增加字体大小。该网站使用下载的 CSS 主题。我看到只有一个名为 main.css 的文件包含字体定义。在其他 CSS 文件中，字体大小使用百分比进行设置。

然而，在 main.css 中，单词“font-size”有 102 处匹配项，因为它设置了所有可能的 HTML 元素及其组合的大小。

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

等等看吧。

我在考虑编写一个脚本，它可以提取字体大小的值 $1 并用 $1+1 替换它们。

过一会儿，可能会有更优雅的解决方案？也许我可以使用 CSS 自己重新定义字体大小？

- xaxa

4

这就是为什么不鼓励使用硬编码像素值。一般来说，最好使用 em 单位。然后，在 CSS 文件的开头，在 html 元素上指定一个“基准”字体大小，所有字体都将从此处缩放。 - crush

是的，没错，但我在这里没有选择。我只有现在手头上的东西。 - xaxa

1

@xaxa 我建议你现在浏览一遍并将它们更改为 em 大小。你可以使用你的脚本想法计算 em 值。 - crush

@xaxa 你想要用哪种语言编写脚本？ - crush

其实无所谓，我之前想学Ruby... - xaxa

显示剩余8条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- crush · Accepted Answer

我使用以下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 是我不知道的少数语言之一）