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

Question

我有一个大拉斐尔画布,上面画着数百个SVG,我正在使用" raphael pan and zoom "插件来放大和缩小.

因此,我最初绘制的svgs非常小,用户只需放大/缩小.

我遇到的问题是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. */

我已经尝试将'line-height'设置为'0.5',没有运气.有任何想法吗？

谢谢!

Answer 1

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

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

我不知道是否每个浏览器都会以相同的方式舍入它。在舍入子像素百分比时，他们似乎都有不同的策略。如果您对不同浏览器中的子像素舍入的详细信息感兴趣，可以阅读有关 ElastiCSS 的精彩文章。

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

有关此问答的更多信息