如何在所有縮放級別保持字體大小相等？

我做了一些泡沫使用圖標字體和文字陰影，我需要保持這些氣泡在所有縮放級別相等的大小如何在所有縮放級別保持字體大小相等？

這裏是我的語法

span.bubble_1 { 
     position: absolute; 
     top: percentage(22/661); 
     left: percentage(66/658); 

     &:before { 
      content : attr(data-icon); 
      color: transparent; 
      opacity: 0.18; 
      font-size: 132px; 
      @include text-shadow(0 0 30px #0070b1); 
     } 
}

字體大小實際上是我的氣泡尺寸，我希望我的字體大小在瀏覽器的所有縮放級別上都是相等的

有沒有純CSS的方式？

編輯：我很多搜查，發現有一個名爲TEXT-SIZE調整一個CSS3屬性，但它不是在任何主流瀏覽器

來源

2013-08-07 Cameron A

支持試試這一個。

132 *個zoomLevel

一定要在一個小數的縮放級別值。

來源

2013-08-07 03:28:41

那是什麼？！ –

你想讓字體大小變得動態嗎？如果是這樣的數學邏輯來改變字體大小，其中132是當前字體大小 –

如果你願意使用JavaScript，下面的代碼：

HTML：

<p>This text will preserve its size</p>

的Javascript：

window.onload = setSize(); 
window.onresize = setSize(); 

function setSize() 
{ 
    para = document.querySelector('p'); 
    windowHeight = parseInt(window.innerHeight); 
    newSize = 0.05*windowHeight;  // Change 0.05 to control size 
    para.style.fontSize = newSize; 
}

在這個簡單的代碼，文本將改變位置，由於保證金大小的變化，所以只需添加以下內容以避免這種情況：

body { margin: 0; }

這不會在jsfiddle上工作，因爲輸出區域不是網頁本身。直接運行它。

來源

2015-07-14 10:35:53

如何在所有縮放級別保持字體大小相等？

回答

相關問題