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

Question

我有一个大的Raphael 画布，上面绘制了数百个 SVG，并且正在使用“raphael pan and zoom”插件来放大和缩小。

因此，我最初将我的 svg 画得很小，而用户只是放大/缩小。

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

我无法将字体大小更改为 1.5 像素，或任何一半大小（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。某些浏览器会显示此内容而不会被截断。

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

我不知道是否每个浏览器都会以同样的方式舍入它。在四舍五入亚像素百分比时，它们似乎都有不同的策略。如果您对不同浏览器中亚像素舍入的细节感兴趣，有an excellent article on ElastiCSS。

即使在绘制页面时对数字进行了四舍五入，完整的值也会保留在内存中并用于后续子计算。例如，如果您的 100.4999 像素的框绘制到 100 像素，那么宽度为 50% 的子框将被计算为 0.5*100.4999 而不是 0.5*100。以此类推到更深层次。

more about on this q/a