Как сохранить размер шрифта во всех уровнях масштабирования?

Question

Я сделал некоторые пузырьки с помощью значков шрифтов и тень текста, мне нужно, чтобы сохранить размер этих пузырьков равных во всех уровнях масштабирования

вот мой синтаксис

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?

Edit: Я искал много, и выяснил, есть CSS3 свойство называется TEXT-SIZE-ADJUST, но она не поддерживается в любых основных браузерах

Answer 1

Попробуйте это.

132 * zoomLevel

Убедитесь, что ваш зум значение уровня в одной десятичной.

Answer 2

Если вы готовы использовать 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, поскольку область вывода не является самой веб-страницей. Запустите его напрямую.