1.9px文本大小显示为1px-Raphael SVG、CSS、Javascript

我有一个大画布，上面画了数百个SVG，我正在使用“”插件进行放大和缩小

因此，我最初将SVG绘制得非常小，用户只需放大/缩小

我遇到的问题是2px文本大小太大，1px文本大小太小，但是当我尝试“1.5px”时，它会再次显示为1px文本大小

我无法将字体大小更改为1.5px或1.2、1.6、1.9…的任何一半

这是我的密码：

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

• 当我将任何数字从“1px”放到“1.9px”时，它被渲染为大小“1px”
• 当我放置“2px”时，它被渲染为大小“2px”

“myFont”的CSS是：

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

我尝试将“线高度”设置为“0.5”，但没有成功。有什么想法吗

---

谢谢

以像素为单位定义宽度时，并非所有浏览器都支持小数位数。在chrome中，小数点被截断，因此5.5px或5.6px变为5px。某些浏览器显示此内容时不会被截断

宽度将四舍五入为整数个像素

不过，我不知道是否每个浏览器都会以同样的方式来处理它。在舍入亚像素百分比时，它们似乎都有不同的策略。如果您对不同浏览器中的亚像素舍入细节感兴趣，有以下几种方法

即使在绘制页面时将数字四舍五入，完整值仍保留在内存中，并用于后续的子计算。例如，如果100.4999px的盒子绘制为100px，则宽度为50%的子盒子将计算为.5*100.4999，而不是.5*100。等等，深入到更深的层次

---

您能定义分数像素吗？我以为他们天生就是绝对的。哦！我不知道！该死的，真是个倒霉蛋。非常感谢。我已经学会了避免SVG中的文本元素，因为它们在浏览器中非常特殊。值得一提的是，在大多数情况下，使用Cufonized字体和Raphael的

打印
方法是一种非常灵活的方法。。。