10

我不是 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 本身以某种方式重新定义字体大小？

4

1 回答 1

8

我使用以下 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通常首选 's。

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

于 2013-09-10T14:01:35.860 回答