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

Question

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

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

最好是这样的:

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

或

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

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

---

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

Answer 1

Is it somehow possible to detect the font which is actually displayed in the browser and adjust the font-size accordingly in CSS?

答案是否。

我只能给出建议，不要将布局基于任何(文本)元素/节点的“知道宽度和/或高度”!

网站并不意味着像素完美的绘图 - 它不是打印设计。

有太多(不可预见的)情况会影响所使用的字体和/或字体大小，因此任何试图使它们符合预期的尝试很可能会失败。

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

有一些脚本可以做到这一点。一个是 FitText