13

我的网站显示就像在 IE 和 Opera 中一样需要,但在 Firefox 中,我无法(通过 CSS)使字体大小小于 Firefox 的默认最小字体大小。当然我可以去工具>选项并删除这个值,但是其他用户会看到一些元素被替换。

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

4

8 回答 8

53

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

1. 你不应该这样做。

存在最小字体大小设置是有原因的,而且非常好。简而言之,对于大多数字体,阅读低于 12 像素的任何内容已经很困难,更不用说低于默认的最小 9 像素了。如果您的设计在极受限制的情况下需要这种字体大小¹,那么您的设计就是糟糕的,并且排除了大量用户。

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

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

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

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

无论如何要怎么做

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

科学位来了

每个字体都有一个叫做aspect value的东西,它是它的 x-height(字母 x 的高度)² 与您设置的实际 font-size 之间的比率。例如,在 Comic Sans 中,这真的很大 (0.55),因为您可以通过较短的字母(a、c、e...)与较高的字母(b、d、h...)相比有多大,而在 Courier 中新它要小得多(0.43)。

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

不幸的是,我们也可以使用它来使文​​本不那么清晰。假设您的正文是 12px 的 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×的 x 高度font-size-adjust。例如,以下将导致有效字体大小为 6px:

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

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

演示

在 Firefox 中尝试设置最小字体大小。它利用了两个错误:上述font-size-adjust问题和一个单独的问题,即通过getComputedStyle.

您需要知道用于计算正确font-size-adjust值的字体的纵横比值,这个纵横比值列表可能会对您有所帮助。(或者,尝试估计系统上安装的字体的 x 高度。)

可是等等!还有更糟的!

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

-webkit-text-size-adjust: none;

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

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

错误最终得到修复。无论您不负责任的设计师和 PM 多么希望您这样做,您都不能覆盖浏览器的默认字体大小。迟早,人们会发现这些特性正在被利用来让每个人的网络变得更糟,有人会登陆补丁,乐趣就会结束。

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


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

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

于 2012-09-27T22:56:07.907 回答
2

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

于 2013-02-11T20:22:30.970 回答
2

你做不到。这是 Firefox 提供的设置,因此像我们这样的人无法使用某些 CSS 设置覆盖它。

于 2012-09-26T16:15:12.277 回答
1

以防万一它可以帮助任何人,我最终用 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 的最小字体大小问题。

于 2012-09-26T08:29:47.260 回答
0

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

body {

    font-size: 62.5%;

}

p  {

    font-size: 1em;
}

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

Eric Meyers CSS 重置 HTH

于 2011-12-29T08:38:58.550 回答
0

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

于 2010-08-27T15:38:56.730 回答
-1

你可以试试下面的代码

身体 {

min-font-size: 15px!important;

}

于 2013-05-01T07:36:38.157 回答
-2

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

body
{
    font-size: 12px;
}
于 2010-03-10T22:18:01.153 回答