解决方案并不简单。字体外观因浏览器、操作系统以及客户端系统上可用的字体而异。在没有根据您的目标受众进行进一步测试的情况下,请不要仅从表面上接受这个答案。
在 Windows 上,从 Firefox 4 和 IE9 开始,字体是使用 DirectWrite 而不是 GDI 呈现的。自此更改以来,“Arial Narrow”和“Arial Black”等字体被视为 Arial 系列的一部分,而不是独立的系列。因此,在 Firefox 中,您可以通过带有一些修饰符的常规 Arial 声明来访问 Arial Narrow。 IE9 以类似的方式工作,但似乎内置了一些实用的作弊机制,使其以开发人员习惯的方式工作。
富兰克林哥特式中号
font-family: "Franklin Gothic Medium", "Franklin Gothic", sans-serif;
除 Firefox 之外的所有浏览器都可以理解“Franklin Gothic Medium”。 Firefox 没有,而是继续下一个选择“Franklin Gothic”,您可能甚至认为自己没有,但这就是“Franklin Gothic Medium”在 DirectWrite 世界中的存在。在没有任何其他修饰符的情况下(斜体、粗体、拉伸),当指定“Franklin Gothic”时,我的 Firefox 会抓取“Franklin Gothic Medium”。
Arial 窄粗体
font-family: "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
font-weight: 700;
某些浏览器(例如 Chrome 和 IE7-8)可识别“Arial Narrow Bold”。但 IE9 和 Firefox 则不然。 IE9 确实可以识别“Arial Narrow”。 Firefox 降级为 Arial。font-stretch: condensed
告诉 Firefox 使用 Arial 的“Arial Narrow”版本,并且font-weight: 700;
告诉 IE9 和 Firefox 使用“Arial Narrow Bold”版本据我所知。 600、700、800 和 900 的字体粗细对我来说触发了粗体。
Franklin Gothic Medium 与 Arial Narrow Bold 后备
现在你已经有了第 22 条军规。
font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
如果 Firefox 可以找到“Franklin Gothic”,那就没问题,但如果找不到,则会回退到“Arial”。如果你使用font-stretch: condensed; font-weight: 700;
将其转换为“Arial Narrow Bold”,当不使用 Arial 后备时,您将影响 Franklin 的外观。每个浏览器都会应用font-weight
如果富兰克林有空,就把规则交给富兰克林——这根本不是你想要的。如果你使用font-stretch: condensed
Firefox 可以访问富兰克林,它会尽职尽责地压缩它。 (我在任何其他浏览器中都没有看到这一点。)在您的特定情况下,我会指望 Firefox 获得 Franklin 并接受常规 Arial 将用作后备。但添加“Franklin Gothic”(适用于 FF)和“Arial Narrow”(适用于 IE9)将会有很大帮助。
(在撰写本文时,Chrome 的版本为 21,Firefox 的版本为 14。)