如何覆盖 Firefox 中的最小字体大小？

发布于 2024-08-24 15:36:55 字数 249 浏览 6 评论 0原文

我的网站在 IE 和 Opera 中的显示方式与我需要的一样，但在 Firefox 中，我无法使用 CSS 来获取小于 Firefox 默认最小字体大小 的字体大小。当然，我可以转到 Tools → Options 并删除此值，但有些用户会看到一些元素被替换。

我尝试过使用 !important，但它不起作用，而且我无法用图像替换文本，因为它们是动态字段。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

注定孤独终老 2024-08-31 15:36:55

好的。我将解释如何执行此操作，但您首先需要了解一些事情。

1. 你不应该这样做。

最小字体大小设置的存在是有原因的，而且是一个很好的原因。简而言之，对于大多数字体来说，阅读低于 12 像素的任何内容都已经很困难，更不用说低于默认的最小值 9 像素了。如果您的设计要求这样的字体大小，但除了极其有限的情况之外，那么您的设计就很糟糕，并且排除了大量用户。

2.你真的不应该这样做。

网络本质上是一种灵活的媒介，好的设计必须考虑到这一点。需要固定字体大小才能工作的设计适合打印，但不适合网页。任何无法满足此要求的设计师都无法理解这种媒介，并且任何体面的 PM 都不应该将设计师的错误决策置于实用性和可用性之上。如果你不能反对这个决定，你就有更大、更根本的问题需要处理。

3. 你真的、真的不应该这样做。

根据您所在的司法管辖区，您可能会徘徊在法律的灰色地带。较小的字体很难阅读，并且会让用户很容易错过信息 - 如果手头的文本具有法律意义，例如选择退出信息或免责声明，这尤其麻烦。您还为视力障碍人士带来严重问题，从而在网站的可访问性方面如履薄冰。

如何做到这一点

让 Firefox 显示小于最小指定大小的字体非常容易：只需使用 font-size-adjust 属性。

科学点来了

每个字体都有一个叫做纵横比值的东西，它是它的 x 高度（字母 x 的高度）² 和您设置的实际字体大小之间的比率。例如，在 Comic Sans 中，这个值确实很大 (0.55)，您可以通过较短的字母 (a、c、e...) 与较高的字母 (b、d、h...) 相比有多大来判断，而在 Courier 中新的它小很多（0.43）。

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

不幸的是，我们也可以使用它来使文本变得不那么清晰。假设您的正文是 12 像素的 Segoe UI：

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

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 */
}

如果我们将其设置得更小会发生什么？那么，浏览器将调整字体大小，以使用等于 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 */
}

这构成了我们攻击的基础。事实证明，即使 Firefox 覆盖了最小字体大小，它也会遵循 font-size-adjust 。（不用说这是一个错误。）

演示

在 Firefox 中尝试一下，并设置最小字体大小。它利用了两个错误：前面提到的 font-size-adjust 问题和通过 getCompulatedStyle 报告渲染字体大小的单独问题。

您需要知道所使用的字体的宽高比值，以便计算正确的 font-size-adjust 值，对于该值此方面值列表可能会对您有所帮助。（或者，尝试系统上安装的字体的估计 x 高度 .）

但是等等！还有更糟糕的！

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

-webkit-text-size-adjust: none;

这是另一个错误。 text-size-adjust 是一项非标准提案，旨在限制移动设备上文本大小自动膨胀的程度。它不适用于桌面用户代理，更不用说阻止手动调整文本大小了。

最后一句话：它不会永远持续下去

错误最终会得到修复。无论你不负责任的设计师和产品经理多么希望你这么做，你都不应该能够覆盖浏览器的默认字体大小。迟早，人们会发现这些属性被利用，让网络对每个人来说都变得更糟，有人会发布补丁，乐趣就会结束。

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

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

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

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.

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.

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.

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).

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.

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

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:

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:

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.)

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.

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.)

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:

-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.

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.

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.

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

回复收藏 0 原文

一枫情书 2024-08-31 15:36:55

为了以防万一它可能对任何人有帮助，我最终用 SVG 区域替换了最初在 HTML 中的小文本区域。我用 Raphaël JS 库填充这些区域，代码就像

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 的最小字体大小问题。

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

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.

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.

回复收藏 0 原文

奶茶白久 2024-08-31 15:36:55

你做不到。这是 Firefox 提供的一项设置，这样像我们这样的人就无法使用某些 CSS 设置来覆盖它。

回复收藏 0 原文

魂ガ小子 2024-08-31 15:36:55

您可以使用 CSS3 的 transform:scale(x) 语法有效地将文本缩小到最小尺寸以下，其中 x 1..这保证可以在未来的浏览器中使用（因为这是扩展的重点），但也有其自身的挑战/警告。

回复收藏 0 原文

傲娇萝莉攻 2024-08-31 15:36:55

在某些情况下，您可以使用

回复收藏 0 原文

将军与妓 2024-08-31 15:36:55

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

body {

    font-size: 62.5%;

}

p  {

    font-size: 1em;
}

因此，如果您确实想让标准段落文本为 10px ...您只需在 CSS 中将其声明为 1em，它就会呈现为 10px。请注意，如果您确实想正确执行此操作...您也需要重置 CSS，因为您希望显示保持一致...

埃里克·迈耶斯 CSS 重置
华泰

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.

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 ...

Eric Meyers CSS Reset
HTH

回复收藏 0 原文

演出会有结束 2024-08-31 15:36:55

你可以尝试下面的代码

主体{

min-font-size: 15px!important;

}

you can try the following code

body {

min-font-size: 15px!important;

}

回复收藏 0 原文

蓝天 2024-08-31 15:36:55

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

body
{
    font-size: 12px;
}

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

body
{
    font-size: 12px;
}

回复收藏 0 原文

~没有更多了~

关于作者

悲喜皆因你

暂无简介

0 文章

0 评论

837 人气

关注发私信

友情链接

文江博客

如何覆盖 Firefox 中的最小字体大小？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

1. 你不应该这样做。

2.你真的不应该这样做。

3. 你真的、真的不应该这样做。

如何做到这一点

科学点来了

演示

但是等等！还有更糟糕的！

最后一句话：它不会永远持续下去

1. You shouldn't be doing this.

2. You really shouldn't be doing this.

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

How to do it anyway

Here comes the science bit

The demo

But wait! There's worse!

Last word: it won't last forever

关于作者

相关话题

热门标签

推荐作者

苦中寻乐

lueluelue

嗼ふ静

王权女流氓

与花如笺

残酷

友情链接

如何覆盖 Firefox 中的最小字体大小？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

1. 你不应该这样做。

2.你真的不应该这样做。

3. 你真的、真的不应该这样做。

如何做到这一点

科学点来了

演示

但是等等！还有更糟糕的！

最后一句话：它不会永远持续下去

1. You shouldn't be doing this.

2. You really shouldn't be doing this.

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

How to do it anyway

Here comes the science bit

The demo

But wait! There's worse!

Last word: it won't last forever

关于作者

相关话题

热门标签

推荐作者

苦中寻乐

lueluelue

嗼ふ静

王权女流氓

与花如笺

残酷

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。