Jor*_*ray 50
好的.我将解释你是如何做到这一点的,但你需要先了解一些事情.
存在最小字体大小设置的原因和非常好的原因.简单地说,对于大多数字体来说,读取12px以下的任何东西已经很难了,不要低于默认的最小值9px.如果你的设计要求除了一组极其有限的情况之外的任何东西,那么你的设计很糟糕,并且排除了大量用户.
网络是一种本质上灵活的媒介,一个好的设计必须考虑到这一点.需要固定字体大小才能工作的设计适合打印,但它们不适合网络.任何不能满足这一要求的设计师都不理解这种要求,没有像样的PM应该优先考虑设计师对实用性和可用性的错误决策.如果你不能反对这个决定,你有更大,更基本的问题需要处理.
根据您所在的司法管辖区,您可能会在合法的灰色区域徘徊.微小的字体大小难以阅读,并且会使您的用户很容易错过信息 - 如果手头的文本具有法律意义,例如选择退出信息或免责声明,这尤其麻烦.您还会因视力障碍造成严重问题而对您网站的可访问性进行处理.
将Firefox显示字体设置为低于指定的最小尺寸非常容易:只需使用该font-size-adjust属性即可.
每种字体都有一个称为宽高比值的东西,它是x高度(字母x的高度)²与你设置的实际字体大小之间的比率.例如,在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的高度.
Dus*_*ine -2
如果您在正文上设置字体大小属性，则应将其设置为默认字体大小。
body
{
font-size: 12px;
}