不同页面使用em设置CSS字体大小不同

4

CSS不是我的强项,所以这可能是一些简单的东西。我在样式表中使用0.8em设置了我的页脚字体大小,但在不同的页面上它的大小不同。我只是在编辑别人的工作,他没有关闭标签,所以有点麻烦。

有没有一种方法可以清除所有字体设置,以便页脚在所有页面上都相同?还是这是可以通过其他方式解决的问题?

感谢任何帮助。


1
你能发布一个网站链接吗?如果没有看到各个页面上的字体大小定义,这将很难进行故障排除。 - peterjmag
很抱歉,它在一个内部网络上。之前的网站设计师只使用了内联CSS,并使用<FONT>标签,但从未关闭其中任何一个。每个页面大约有20-50个这样的标签。 - Rudiger
1
如果您正在使用<font>标签,则页面可能需要重新设计。<font>在HTML 4.0 Transitional中已被弃用,并且在HTML 4.0 Strict中是无效的。假设大部分是基于IE的内部网络,并且在没有有效文档类型的情况下开发IE的困难,我认为这将是值得的。但是...我想您需要一个业务案例来证明成本。可怜的家伙。=/(参考:http://www.w3.org/TR/REC-html40/present/graphics.html#edef-FONT) - David Thomas
这些页面中是否设置了文本大小,而且大小不同?你使用的是哪个浏览器? - Anero
David - 我同意,但不幸的是,这个网站不是我的,它是由他们用 VBScript 编写的应用程序购买的。很遗憾我什么也做不了。 Anero - 我看不出来有什么问题。所有浏览器都存在同样的问题。 - Rudiger
1
@Rudiger,这很公平。只是,你知道的,呃呃呃呃呃 =D - David Thomas
4个回答

14

我注意到还没有人涉及em作为字体大小单位的工作原理,因此我将尝试为您澄清这一点。

有两种方法可以告诉浏览器如何渲染您的字体大小。

  1. 设置 绝对 大小
    对于像pxpt这样的 绝对 大小,您告诉浏览器您想要文本的确切大小。如果您写入12px,它将以确切的 12 像素高度显示。
  2. 设置 相对 大小——em 是一个 相对 大小。
    对于像em这样的 相对 大小,您正在告诉浏览器如何根据页面上其他文本的大小来调整文本的大小。这类似于百分比,因此如果页脚文本的大小设置为0.8em,则其高度将呈现为页面上主要文本的 80%。

这就解释了为什么在不同的页面上会获得不同的大小。如果一个页面上正文的字体大小明确设置,但在另一个页面上根本没有设置(或明确设置为不同的大小),那么您的基于em的字体将呈现为不同的大小。

这也是为什么使用<font>标签非常糟糕的原因。它将是一个严重的痛点,需要深入挖掘这些标签并找出可能会破坏您的em值的明确大小。
当您使用CSS设置字体大小时,这不仅是易于查找的信息,而且是易于修改的属性。


1
正如David Thomas所说,使用<font>已被弃用。如果您有一个软件工具可以进行全局编辑,您可以尝试删除所有的<font>标签,然后将类添加回实际需要不同字体的HTML中,并将字体信息添加到CSS中。
另一种选择是逐个处理,我想这会很耗时间。至少当您完成时,您将拥有更清洁的HTML。

在某种程度上辩解,以前的设计师可能使用了所见即所得的网页设计工具来为他/她创建HTML,并没有看到生成的代码。


1

尝试使用精确的大小,使用pxpt单位而不是em
百分比和em中的大小可能会因意外继承级别而出现问题,但pxpt不会。


4
尝试在蛋糕上撒盐,而不是糖。糖可能会导致龋齿或糖尿病,但盐不会。 :( - ANeves

0
我的解决方案基本上是使用内联样式来纠正任何问题。使用像素而不是em也是一种选择,但我们更喜欢保持可访问性,而不是追求最佳实践来避免使用内联样式(无论如何,任何最佳实践都已经被抛到了窗外)。

我建议在FireFox中使用Firebug(Chrome有本地工具,IE也有但相比之下很差),并检查哪些样式应用于元素(继承或非继承,被覆盖或未被覆盖)。然后,通过查看哪个额外规则被应用于黑羊元素,很容易找出不同大小是从哪里来的。 - ANeves
嗯,在这种情况下,它似乎并不是一个愉快的阅读体验。x_x - ANeves

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接