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

Question

我有一个很大的Raphael Canvas 上绘制了数百个 SVG，我正在使用“raphael pan and zoom”插件进行放大和缩小。

因此，我最初绘制的 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. */

我试过将“line-height”设置为“0.5”，但没有成功。有什么想法吗？

谢谢!

Answer 1

当您以像素为单位定义宽度时，所有浏览器都不支持小数位。在 chrome 中，小数位被 chop ，因此 5.5px 或 5.6px 变为 5px。一些浏览器显示这个没有 chop 。

The width will be rounded to an integer number of pixels.

I don't know if every browser will round it the same way though. They all seem to have a different strategy when rounding sub-pixel percentages. If you're interested in the details of sub-pixel rounding in different browsers, there's an excellent article on ElastiCSS.

Even when the number is rounded when the page is painted, the full value is preserved in memory and used for subsequent child calculation. For example, if your box of 100.4999px paints to 100px, it's child with a width of 50% will be calculated as .5*100.4999 instead of .5*100. And so on to deeper levels.

more about on this q/a