通过 css 根据堆栈中显示的系统字体调整字体大小答案

【问题标题】：adjusting font-size according to the displayed system-font in a stack via css通过 css 根据堆栈中显示的系统字体调整字体大小
【发布时间】：2014-03-15 05:09:27
【问题描述】：

如果浏览器安装在客户端系统上或通过服务器上的@font-inclusion 提供，则字体堆栈提供了建议浏览器应显示的有序字体列表的可能性——到目前为止一切都很好。但有时光学相似的字体在显示大小上有很大的差异。例如，Lucida Grande 是替代Calibri 的好选择。但大小差异超过 20%：TEST 与 font-size: 50px; 和 Calibri 的字宽为 95px，而与 Lucida Grande 的字宽为 118px。

所以，问题来了：是否有可能检测浏览器中实际显示的字体并相应地调整font-size 在 CSS 中？我想避免使用 JavaScript，因为它只是一个布局问题。

最好是这样的：

font: 400 50px/1 'Calibri', 400 40px/1 'Lucida Grande';

或

font-family: 'Calibri', 'Lucida Grande';
font-size: 50px, 40px;

但是太糟糕了——这行不通！

编辑：这是一个“学术”问题。我知道，我可以使用 JavaScript，而且我知道，我可以购买 web font 并不用担心，喝杯啤酒——但我只是想知道是否有人对此有聪明的解决方法！

【问题讨论】：

不过你要找的是font-size-adjust，支持不多，最好选择JavaScript解决方案

标签： css font-size system-font

【解决方案1】：

是否有可能检测浏览器中实际显示的字体并在 CSS 中相应地调整字体大小？

答案是否。

我只能给出建议，不要将您的布局建立在“知道宽度和/或高度”任何（文本）元素/节点的基础上！

网站不应该是像素完美的图画——它不是印刷设计。

有很多（不可预见的）情况可能会影响所使用的字体和/或字体大小，任何按预期制作它们的尝试很可能会失败。

您可以尝试的唯一方法是使用 Javascript 获取元素的宽度/高度并调整字体大小，只要大小适合您的需要。

为此有一些脚本。一个是FitText

【讨论】：

我并不是想做到“像素完美”，但 20% 的差异是很大的。我自己用几行代码编写了这样的脚本（不需要像 jQuery 这样的臃肿框架）。但我想知道是否有纯 CSS 解决方案？
@AvL 很好。是的，差异可能很大。但是恕我直言，这仍然是网页设计中未解决的问题。 CSS中有一些属性，例如font-size-adjust。但这并不能真正帮助您，只要您不知道浏览器最终使用的是哪种字体。因此，使用一些与您的示例中的字体没有太大差异的替代字体可能会增加机会......！
实际上（就像很多次一样）Microsoft 导致了这个问题：将 Office 中的默认无衬线字体从 Arial 更改为 Calibri 并且不匹配字体大小是疏忽大意。许多小企业只是将这些字体用于他们的名片，并要求在网站上使用相同的字体……
你见过吗：“2013 年，作为 Chrome 的一部分，Google 发布了一种名为 Carlito 的免费许可字体，它与 Calibri 公制兼容（即可以在不改变布局的情况下在文档中替换它）。”？（来自：en.wikipedia.org/wiki/Calibri#Availability）