1.9 px размер текста отображается как 1px-Raphael SVG, CSS, Javascript

У меня есть большой холст Raphael с сотнями SVG, нарисованных на нем, и я использую плагин " raphael pan and zoom" для увеличения и уменьшения масштаба.

Из-за этого я изначально рисую свои SVG очень маленькими, и пользователь просто увеличивает/уменьшает масштаб.

Проблема, с которой я сталкиваюсь, заключается в том, что размер текста 2px слишком велик, а размер текста 1px слишком мал, однако когда я пытаюсь "1.5 px", он просто снова отображается как размер текста 1px.

У меня возникли проблемы с изменением размера шрифта, чтобы быть 1.5 px , или любой половинный размер одного (1.2, 1.6, 1.9...)

Вот мой код: 

...
this.paper.text(x, y, string)
          .attr({'font-family':'myFont', 'font-size':'1.5px'});
...
  • когда я ставлю любое число от " 1px " до " 1.9 px", оно отображается как размер " 1px ".
  • Когда я ставлю " 2px", это отображается как размер " 2px".

CSS для 'myFont': 

@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', но безуспешно. Есть идеи?

Спасибо!

1 5
javascript css jquery svg raphael

1 ответ:

Все браузеры не поддерживают десятичные знаки при определении ширины в пикселях. В chrome десятичные знаки усекаются, и таким образом 5.5 px или 5.6 px становится 5px. Некоторые браузеры отображают это без усечения.

Ширина будет округлена до целого числа пикселей .

Я не знаю, будет ли каждый браузер обходить его одинаково. Все они, похоже, имеют разную стратегию при округлении субпиксельных процентов. Если вы заинтересованы в подробности субпиксельного округления в разных браузерах, естьотличная статья по ElastiCSS .

Даже если число округляется при рисовании страницы, полное значение сохраняется в памяти и используется для последующего дочернего вычисления. Например, если ваш ящик 100.4999 px раскрашивается на 100px, то его дочерний размер с шириной 50% будет рассчитан как .5 * 100.4999 вместо .5 * 100. И так далее до более глубоких уровней.

Подробнее об этом q/a

2