1.9px text size shown as 1px - Raphael SVG, CSS, Javascript

I have a large Raphael canvas with hundreds of SVGs drawn on it, and am using the "raphael pan and zoom" plugin to zoom in and out.

Because of this, I initially draw my svgs very small, and the user just zooms in/out.

The problem I am having is 2px text size is too large, and 1px text size is too small, however when I try "1.5px", it just gets displayed as 1px text size again.

I am having trouble changing the font size to be 1.5px, or any half size of one (1.2, 1.6, 1.9...)

Here is my code:

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

• When I put any number from "1px" to "1.9px", it is rendered as size "1px".
• When I put "2px" it is rendered as size "2px".

The CSS for 'myFont' is:

@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. */

I've tried setting 'line-height' to '0.5', with no luck. Any ideas?

Thanks!