Question

我的网站在IE和Opera中显示就像需要的那样，但在Firefox中我无法通过CSS获得比Firefox的默认最小字体大小更小的字体。当然，我可以转到工具＆gt;选项并删除此值，但其他用户会看到一些元素被取代。

我尝试过使用！important，但它不起作用。我无法用图像替代文本，它们是动态字段。

Answer 1

你不能这样做。这是Firefox提供的设置，以便像我们这样的人不能使用一些CSS设置覆盖它。

Answer 2

您可以使用CSS3的transform: scale(x)语法有效缩小低于最小尺寸的文字，其中x < 1。这保证可以在未来的浏览器中使用（因为这是扩展的重点），但它确实带来了自己的挑战/警告。

Answer 3

为了防止它对任何人有帮助，我最终用SVG区域替换了最初用HTML格式的小文本区域。我用RaphaëlJS库填充这些区域，代码如

logo_text = $j("#logo_text").val();
logo_text_preview_paper.clear();
logo_text_preview_paper.text(0, 4, logo_text).attr({"font-family": 'Helvetica', "font-size": 7, "text-anchor": 'start'});

我没有使用HTML画布，因为它在某些浏览器上缺乏可用性，并且因为SVG在Retina显示器上提供了更好的用户体验。

这样做似乎有些过分，但我无法找到更简单的FF最小字体大小问题的解决方案。

Answer 4

在某些情况下，您可以使用＆lt; canvas＆gt; element和fillText（）。

Answer 5

如果您将网页中的默认CSS字体大小设置为百分比...然后通过调整大小，您可以提供跨浏览器的可伸缩性...将字体大小设置为62.5％是重新缩放字体基础的基础尺寸为10px。

body {

    font-size: 62.5%;

}

p  {

    font-size: 1em;
}

所以，如果你真的想让你的标准段落文本说10px ...你只需在你的CSS中说明它为1em，它将呈现为10px。请注意，如果您真的想要正确地执行此操作...您还需要进行CSS重置，因为您希望显示器保持一致...

Eric Meyers CSS Reset HTH

Answer 6

您可以尝试以下代码

body {

min-font-size: 15px!important;

}

Answer 7

如果在主体上设置字体大小属性，则应将其设置为默认字体大小。

body
{
    font-size: 12px;
}

如何覆盖Firefox中的minimum-font-size？

7 个答案: