dimensioni del testo 1,9 px visualizzate come 1px - Raphael SVG, CSS, Javascript

Question

Ho una grande tela Raphael con centinaia di SVG disegnati su di essa e sto utilizzando il plug-in "raphael pan and zoom" per ingrandire e ridurre.

Per questo motivo, inizialmente disegno il mio svgs molto piccolo e l'utente esegue solo lo zoom avanti/indietro.

Il problema che sto avendo è una dimensione del testo di 2px è troppo grande, e la dimensione del testo di 1px è troppo piccola, tuttavia quando provo "1.5px", viene visualizzata nuovamente come dimensione del testo 1px.

Sto avendo difficoltà cambiando la dimensione del carattere per essere 1,5 px, o qualsiasi formato mezzo di una (1.2, 1.6, 1.9 ...)

Ecco il mio codice:

... 
this.paper.text(x, y, string) 
      .attr({'font-family':'myFont', 'font-size':'1.5px'}); 
... 

• Quando si inserisce qualsiasi numero da "1px" a "1.9px", viene visualizzato come dimensione "1px".
• Quando inserisco "2px" è visualizzato come dimensione "2px".

Il CSS per 'myFont' è:

@font-face { 
    font-family: 'myFont'; 
    src:url('fonts/myFont.eot'); 
    src:url('fonts/myFont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/myFont.woff') format('woff'), 
     url('fonts/myFont.ttf') format('truetype'), 
     url('fonts/myFont.svg#myFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[data-icon]:before { 
    font-family: 'myFont'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    /* line-height: 1; */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-home, .icon-zoom-in{ 
    font-family: 'myFont'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    /* line-height: 1; */ 
    -webkit-font-smoothing: antialiased; 
    pointer-events:none; 
} 
.icon-home:before { 
    content: "\e000"; 
} 
.icon-zoom-in:before { 
    content: "\e001"; 
} 

/* Note: Generated from ico-moon, it's just a font that is a bunch of icons. */ 

Ho provato impostazione 'line-height' a '0.5', senza fortuna. Qualche idea?

Grazie!

Answer 1

Tutti i browser non supportano le posizioni decimali quando si definisce la larghezza in pixel. In chrome le posizioni decimali vengono troncate e quindi 5,5 px o 5,6 px diventano 5 px. Alcuni browser lo mostrano senza troncati.

La larghezza sarà arrotondata a un numero intero di pixel.

Non so se ogni browser lo arrotonda allo stesso modo però. Sembrano tutti avere una strategia diversa quando si arrotondano le percentuali sub-pixel. Se sei interessato ai dettagli dell'arrotondamento sub-pixel in diversi browser, c'è lo an excellent article on ElastiCSS.

Anche quando il numero viene arrotondato quando la pagina viene dipinta, il valore completo viene conservato in memoria e utilizzato per il successivo calcolo figlio. Ad esempio, se la tua casella di 100.4999px dipinge a 100px, il figlio con una larghezza del 50% verrà calcolato come .5 * 100.4999 anziché .5 * 100. E così via fino a livelli più profondi.

more about on this q/a