爲什麼呈現的像素與真實像素不同？

Question

在我的HTML我有一個<div>（稱之爲面板）固定寬度，其中包含一些文本;該文本在隨附的CSS中設置爲font-size: 25px; line-height: 25px;。恰巧文本最終爲36行。

考慮到所有邊距，填充和邊框都爲零，您會希望面板的高度爲36 * 25px = 900px，這實際上是我在Firefox中使用DOM的getBoundingClientRect()方法找到的。

但是，在Google Chrome中，我得到了不同的數字;它會出現面板只有892.7999877929688px高，而線條是24.799999660915798px高。除了這兩個數字仍然給出36。看起來像在CSS中設置的標稱像素之間的縮放比例和由getBoundingClientRect()報告的實像素;在我的情況下，這是1.0080645299120465標稱每個實像素。

另一項證據來自Chromium在nwjs應用程序中運行，其中我最初觀察到這種差異。在我的測試中，它始終顯示與Chrome中的不同。現在，在我的測試過程中，Chromium報告的像素突然跳躍到Firefox中報告的整數值;我不確定我是如何做到這一點的。

可以預料的是，分數比率在某種程度上與頁面縮放相關聯;畢竟，尺寸非常小，Chrome和Chromium會重新排版文字（有時會出錯）。實際上，改變Chrome中的縮放比例會導致不同的比例，並且Chrome會將比例放大到最大，但比例會保持爲1.儘管如此，我的Chromium應用並未放大到最大值，並且仍然有 的分數比例。 測試中的整數像素比率，但實際應用中的分數值。

對於我現在所知道的，我所能做的就是獲得比例，這樣我就可以製作聲音，用JavaScript測量一致的盒子尺寸，就是設置一個已知尺寸的盒子並測量它。

我還在想知道觀察到的行爲的來源是什麼。有沒有關於它的報道？這是渲染器的故意還是緊急行爲？開發者曾經討論過它嗎？有沒有API來獲取比例？

爲了簡化測試，我在https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a的要點上放了一些代碼。

Answer 1

某些字體無法以您要求的確切尺寸進行渲染，字體的屬性會間接影響報告的實際尺寸。如果你想要每一個相同的行爲，也許你必須導入自己的字體來實現類似的渲染交叉瀏覽。在使用IE和Chrome時，我遇到了類似的問題。