通過CSS根據堆棧中顯示的系統字體調整字體大小

Question

字體棧提供了建議瀏覽器應顯示的字體的有序列表的可能性，如果瀏覽器已安裝在客戶端系統上，或者通過服務器上的@font -inclusion提供了它，則到目前為止，到目前為止。 但是有時光學相似的字體在顯示尺寸上會有很大的差異。 例如， Lucida Grande將是代替Calibri的好選擇。 但是大小差異超過20％： TEST字樣的font-size: 50px; Calibri的寬度為95px，而Lucida Grande寬度為118px。

因此，這是一個問題：是否有可能檢測到瀏覽器中實際顯示的font-size並相應地調整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字體並退出煩惱，然后喝杯啤酒-但我只是想知道是否有人對此有一個聰明的解決方法！

Answer 1

是否有可能檢測到瀏覽器中實際顯示的字體並在CSS中相應地調整字體大小？

答案是否定的 。

而且我只能建議不要以“知道任何（文本）元素/節點的寬度和/或高度”為基礎來布局！

網站並不是要成為像素完美的圖紙-它不是印刷設計。

有太多（無法預見的）情況可能會影響所使用的字體和/或字體大小，以至於無法按預期進行制作，則很可能會失敗。

您可以嘗試的唯一方法是使用Javascript獲取元素的寬度/高度並調整字體大小，只要該大小符合您的需要即可。

這里有一些腳本。 一種是FitText