我的网站显示就像在 IE 和 Opera 中一样需要,但在 Firefox 中,我无法(通过 CSS)使字体大小小于 Firefox 的默认最小字体大小。当然我可以去工具>选项并删除这个值,但是其他用户会看到一些元素被替换。
我曾尝试使用!important,但它不起作用。而且我不能用图像代替文本,它们是动态字段。
好的。我将解释你是如何做到这一点的,但你首先需要知道一些事情。
存在最小字体大小设置是有原因的,而且非常好。简而言之,对于大多数字体,阅读低于 12 像素的任何内容已经很困难,更不用说低于默认的最小 9 像素了。如果您的设计在极受限制的情况下需要这种字体大小¹,那么您的设计就是糟糕的,并且排除了大量用户。
网络本质上是一种灵活的媒介,一个好的设计必须考虑到这一点。需要固定字体大小才能工作的设计适合打印,但不适合 Web。任何无法满足此要求的设计师都不了解媒体,并且没有一个像样的 PM 应该将设计师的错误决定优先于实用性和可用性。如果你不能反对这个决定,你就有更大、更根本的问题要处理。
根据您所在的司法管辖区,您可能会徘徊在合法的灰色地带。小字体很难阅读,并且会让您的用户很容易错过信息——如果手头的文本具有法律意义,这尤其麻烦,例如选择退出信息或免责声明。通过给有视力障碍的人造成严重问题,您在网站的可访问性方面也如履薄冰。
让 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 的高度。
transform: scale(x)
您可以使用 CSS3 的语法有效地将文本缩小到最小尺寸以下,其中x < 1
. 这保证可以在未来的浏览器中工作(因为这是扩展的点),但确实有其自身的挑战/警告。
你做不到。这是 Firefox 提供的设置,因此像我们这样的人无法使用某些 CSS 设置覆盖它。
以防万一它可以帮助任何人,我最终用 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 的最小字体大小问题。
如果您将网页中的默认 CSS 字体大小设置为百分比...然后通过 em 调整您可以提供跨浏览器可伸缩性...将字体大小设置为 62.5% 是将字体基本 hx 大小重新调整为 10px 的基础.
body {
font-size: 62.5%;
}
p {
font-size: 1em;
}
所以如果你真的想让你的标准段落文本说 10px ...你只需在你的 CSS 中将它声明为 1em 并且它会呈现为 10px。请注意,如果您真的想正确执行此操作...您还需要进行 CSS 重置,因为您希望您的显示保持一致...
在某些情况下,您可以使用 <canvas> 元素和 fillText()。
你可以试试下面的代码
身体 {
min-font-size: 15px!important;
}
如果您在正文上设置字体大小属性,则应将其设置为默认字体大小。
body
{
font-size: 12px;
}