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

My site displays just like in need in IE and Opera, but in Firefox I can't get (via CSS) to have font sizes smaller than Firefox' default minimum-font-size. Of course I can go to Tools>Options and remove this value, but other users will see some of the elements displaced.

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

I have tried using !important, but it doesn't work. And I can't substitute the text by images, they are dynamic fields.

我尝试过使用!important,但它不起作用。我不能用图像替代文本,它们是动态字段。

8 个解决方案

#1

Okay. I'm going to explain how you do this, but you need to know a few things first.

好的。我将解释你是如何做到这一点的,但你需要先了解一些事情。

1. You shouldn't be doing this.

There is a reason, and a very good one, that the minimum font size setting exists. Simply, with most fonts, it is already a struggle to read anything below 12px, never mind below the default minimum of 9px. If your design calls for such font sizes for anything but an extremely restricted set of circumstances¹, then your design is just bad and excludes a huge category of users.

存在最小字体大小设置的原因和非常好的原因。简单地说,对于大多数字体来说,读取12px以下的任何东西已经很难了,不要低于默认的最小值9px。如果你的设计要求除了一组极其有限的情况之外的任何东西,那么你的设计很糟糕,并且排除了大量用户。

2. You really shouldn't be doing this.

The web is an intrinsically flexible medium, and a good design must take account of this. Designs that require a fixed font size to work are suitable for print, but they are not suitable for the web. Any designer who cannot work with this requirement does not understand the medium, and no decent PM should prioritise a designer's bad decisions over practicality and usability. You have far bigger, more fundamental problems to deal with if you can't argue against this decision.

网络是一种本质上灵活的媒介,一个好的设计必须考虑到这一点。需要固定字体大小才能工作的设计适合打印,但它们不适合网络。任何不能满足这一要求的设计师都不理解这种要求,没有像样的PM应该优先考虑设计师在实用性和可用性方面的错误决策。如果你不能反对这个决定,你有更大,更基本的问题要处理。

3. You really, really shouldn't be doing this.

Depending on your jurisdiction, you may be wandering on a legal grey area. Tiny font sizes are difficult to read, and will make it very easy for your users to miss information—which is especially troublesome if the text at hand is legally significant, such as opt-out information or a disclaimer. You are also treading on thin ice with respect to the accessibility of your site by causing serious problems for people with visual impairments.

根据您所在的辖区,您可能会在合法的灰色区域徘徊。微小的字体大小难以阅读,并且会使您的用户很容易错过信息 - 如果手头的文本具有法律意义,例如选择退出信息或免责声明,这尤其麻烦。您还会因为视力障碍造成严重问题而对您网站的可访问性进行处理。

How to do it anyway

It is quite easy to make Firefox display fonts at less than the minimum specified size: just use the font-size-adjust property.

将Firefox显示字体设置为低于指定的最小大小非常容易:只需使用font-size-adjust属性即可。

Here comes the science bit

Every font has something called an aspect value, which is the ratio between its x-height (the height of a letter x)² and the actual font-size you set. In Comic Sans, for example, this is really big (0.55), as you can tell by how big the shorter letters (a, c, e…) are compared to taller letters (b, d, h…), whereas in Courier New it is a lot smaller (0.43).

每种字体都有一个称为宽高比值的东西,它是x高度(字母x的高度)²与你设置的实际字体大小之间的比率。例如,在Comic Sans中,这真的很大(0.55),你可以看出较短的字母(a,c,e ......)与较高的字母(b,d,h ......)相比有多大,而在Courier中新的它要小很多(0.43)。

This variability can cause some problems. For example, let's say you specify a super-fancy font for your body text, but because you're a good designer you provide several fallback fonts. That's great, but because some of those fallbacks have different aspect values, letters might be smaller and less legible at the size you specified. font-size-adjust allows you to make sure that any fallback has the same x-height as your super-fancy font.

这种可变性可能会导致一些问题。例如,假设您为正文指定了超级花哨的字体,但因为您是一名优秀的设计师,所以您提供了几种后备字体。这很好,但由于其中一些后备具有不同的方面值,因此字母可能会更小,并且在您指定的大小上更不易读。 font-size-adjust允许您确保任何后备具有与超级花哨字体相同的x高度。

Unfortunately, we can also use it to make text less legible. Let's say your body copy is Segoe UI at 12px:

不幸的是,我们也可以使用它来使文​​字不易清晰。假设你的身体副本是12px的Segoe UI:

body {
    font-family: "Segoe UI";
    font-size: 12px;
}

The aspect value of Segoe UI is almost exactly 0.5, so if you specify that as the font-size-adjust value, your font size doesn't change:

Segoe UI的方面值几乎完全为0.5,因此如果将其指定为font-size-adjust值,则字体大小不会更改:

body {
    font-family: "Segoe UI";
    font-size: 12px;
    font-size-adjust: 0.5; /* x-height = 12px × 0.5 = 6px */
}

What happens if we set it to something smaller? Well, the browser will adjust the font size to use an x-height equal to font-size × font-size-adjust. The below, for example, will result in an effective font-size of 6px:

如果我们把它设置得更小,会发生什么?那么,浏览器会调整字体大小以使用等于font-size×font-size-adjust的x高度。例如,下面的结果将导致有效的字体大小为6px:

body {
    font-family: "Segoe UI";
    font-size: 12px;
    font-size-adjust: 0.25; /* x-height = 12px × 0.25 = 3px */
}

This forms the basis of our attack. It turns out that Firefox will honour font-size-adjust even if it overrides the minimum font size. (It goes without saying that this is a bug.)

这构成了我们攻击的基础。事实证明,即使Firefox覆盖了最小字体大小,它也会尊重font-size-adjust。 (不言而喻,这是一个错误。)

The demo

Try this out in Firefox with a minimum font-size set. It exploits two bugs: the aforementioned font-size-adjust issue and a separate issue with reporting the rendered font size via getComputedStyle.

在Firefox中尝试使用最小字体大小设置。它利用了两个错误:前面提到的字体大小调整问题以及通过getComputedStyle报告呈现的字体大小的单独问题。

You need to know the aspect value of the font you are using for this to calculate the right font-size-adjust value, for which this list of aspect values might help you. (Alternatively, try an estimated x-height for fonts installed on your system.)

您需要知道用于此的字体的方面值,以计算正确的字体大小调整值,此方面值列表可能对您有所帮助。 (或者,尝试在系统上安装的字体的估计x高度。)

But wait! There's worse!

The above technique only works in Firefox. It's even easier to override the minimum font size on an element in Webkit, including Safari, iOS Safari and Chrome—just use the non-standard -webkit-text-size-adjust property:

以上技术仅适用于Firefox。在Webkit中覆盖元素的最小字体大小甚至更容易,包括Safari,iOS Safari和Chrome - 只需使用非标准的-webkit-text-size-adjust属性:

-webkit-text-size-adjust: none;

This is another bug, by the way. text-size-adjust is a non-standard proposal intended to limit the extent to which text-size is automatically inflated on mobile devices. It isn't meant to work on desktop UAs, much less prevent manual text resizing.

顺便说一句,这是另一个错误。 text-size-adjust是一种非标准提案,旨在限制文本大小在移动设备上自动膨胀的程度。它不适用于桌面UA,更不用说防止手动调整文本大小。

Last word: it won't last forever

Bugs get fixed eventually. You are not meant to be able to override the browser's default font size, no matter how much your irresponsible designer and PM want you to. Sooner or later, people will figure out that these properties are being exploited to make the web worse for everybody, someone will land a patch and the fun will be over.

错误最终得到修复。无论你的不负责任的设计师和PM想要你多少,你都无法覆盖浏览器的默认字体大小。迟早,人们会发现这些属性正在被利用,使每个人的网络变得更糟,有人会找到一个补丁,乐趣将会结束。

That said, if you are being forced into this, I wholeheartedly advocate a solution that will eventually force the parties involved to rethink their decision.

也就是说,如果你*这样做,我会全心全意地提倡一个解决方案,最终会迫使有关各方重新考虑他们的决定。

---

¹ Hint: if your text conveys any information that is meant to be readable by anyone, ever, then you shouldn't be messing with browser accessibility settings. Legitimate cases include purely decorative effects (complex ASCII art, shape poetry) and document previews.

¹提示:如果您的文本传达了任何人可以读取的信息,那么您就不应该弄乱浏览器辅助功能设置。合法的案例包括纯粹的装饰效果(复杂的ASCII艺术,形状诗歌)和文档预览。

² More correctly, the distance from the baseline to the median height, which is the height of a letter x in most fonts.

²更准确地说,从基线到中间高度的距离,这是大多数字体中字母x的高度。

#2

You cannot do it. It's a setting that Firefox provides so that people like us cannot override it with some CSS settings.

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

#3

You can effectively shrink text below the minimum size using CSS3's transform: scale(x) syntax, where x < 1. This is guaranteed to work in future browsers (as that's the point of scaling), but does come with its own challenges/caveats.

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

#4

Just in case it might help anyone, I ended up replacing the small text areas, initially in HTML, with SVG zones. I fill these zones with the Raphaël JS library, with code like

为了防止它对任何人有帮助,我最终用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'});

I did not use an HTML canvas, because of its lack of availability on certain browsers, and because SVG offers a much better user experience on Retina displays.

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

It might seem overkill to do that, but I was not able to find an easier solution to the Minimum Font Size problem of FF.

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

#5

In some cases you can use <canvas> element and fillText().

在某些情况下,您可以使用 元素和fillText()。

#6

If you set the default CSS font size in your web pages to a percentage ... then through em sizing you can provide cross-browser scalability ... Setting the font size to 62.5% is a basis for rescaling fonts base hx sizes to 10px.

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

body {

    font-size: 62.5%;

}

p  {

    font-size: 1em;
}

So if you really wanted to make your standard paragraph text say 10px ... You would just state it in your CSS as 1em and it would render as 10px. Please note that if you really want to do this correctly ... you need to do a CSS reset too as you want your display to be consistent ...

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

Eric Meyers CSS Reset HTH

Eric Meyers CSS重置HTH

#7

you can try the following code

您可以尝试以下代码

body {

min-font-size: 15px!important;

}

#8

If you set the the font size attribute on the body it should set it as default font size.

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

body
{
    font-size: 12px;
}