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 回答