CSS增加字体大小

Question

我不是CSS的专家,但是有一项任务是增加网站的字体大小.该网站使用下载的CSS主题.我看到有一个文件main.css,其中包含字体的定义.在其他css文件中,使用百分比设置font-size.

但是,font-sizemain.css本身有102个匹配,因为它设置了所有可能的html元素及其组合的大小,如

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

等等.

我正在考虑编写一个脚本,它将提取font-size的值$1并替换它们$1+1.

有一段时间,可能有一个更优雅的解决方案？也许我可以用CSS本身重新定义字体大小？

Answer 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; }

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

html { font-size: 16px; }

然后,如果要全局影响页面上的所有字体大小,可以更改此单个值,并且使用em单位的所有字体都将缩放.

如果您愿意,也可以使用百分比,但em通常是首选.

(对不起,Ruby是我不知道的少数几种语言之一)