Question

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

但是，main.css本身的单词font-size有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; }

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

html { font-size: 16px; }

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

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

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

CSS增加字体大小

1 个答案: