Почему при рендеринге шрифтов Windows иногда не удается правильно отобразить внутренний путь? - PullRequest
0 голосов
/ 24 июня 2019

Насколько я понимаю, когда форма содержит другую форму, внутренняя форма должна рассматриваться снаружи и поэтому не должна быть окрашена, как в этом примере:

enter image description here

К сожалению, Windows не всегда разделяет это мнение, когда дело доходит до рендеринга шрифтов:

Я создал шрифт, который содержит символ, эквивалентный этому svg:

<!-- A small square within a bigger square. -->
<svg><path fill-rule="evenodd" d="M100 0H0V100H100V0ZM99 1H1V99H99V1Z" fill="black"/></svg>

@font-face {
  src: url('data:application/octet-stream;base64,d09GRgABAAAAAAO0AAsAAAAABawAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAQgAAAFZ7wH6IY21hcAAAAYgAAABLAAABcCbHdI1nbHlmAAAB1AAAACQAAAAkZ6/zMmhlYWQAAAH4AAAALwAAADYR8C4BaGhlYQAAAigAAAAcAAAAJAOF/59obXR4AAACRAAAAAgAAAAIAGQAAGxvY2EAAAJMAAAABgAAAAYAEgAAbWF4cAAAAlQAAAAeAAAAIAEOABRuYW1lAAACdAAAAR0AAAHyFNvC+HBvc3QAAAOUAAAAHwAAADCmp1ZJeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQwYpzAwMrAwGDPtAdI9kBoxgcMhoxMDAxMDKzMDFhBQJprCoOD6kLVhcwK/y0YopgVGE4AhRlBcgCfDAo6AAB4nGNgYGBlYGBgBmIdIGZhYGAMYWBkAAE/oCgjWJyZgQsszsKgBFbDAhJXXfj/P4wE8lnAJAMjG8Mo4AGTMlAeOKwgmIERANeXCOkAAAIAAP84AGQAAAADAAcAABcjFTMnIxUzZGRkAWJiZGRjYgAAeJxjYGRgYADi5MN9qvH8Nl8ZuJlfAEUYbpqVfULQ/y0YUkA8Bg4GJhAFAEaQCwQAeJxjYGRgYFb4b8HAwJDCwAAmGRlQARMAOgQCJwAAAAAAZAAAAAAAAAASAAB4nGNgZGBgYGLgAGIGMIuBgQsIGRj+g/kMAAl2ASMAAHicXY69TsMwFIVP+odoEAIhMZulC1L6M/YB2pkO2dPESVslceS4lSoxM/MUzDwFz8WJeyUqbOn6O+ceXxvAA34QoFsBhr52q4cbqgv3SXfCA/Kj8BAhnoVHVC/CY7xiIhziCW+cEAxu6YyRCfdwj1q4T/9deED+EB5y+qfwiP6X8BgxvoVDTILRPjV1u9HFsUysZ19ibdu9qdU8mnm91rW2idOZ2p5VeyoWzuUqt6ZSK1M7XZZGNdYcdOqinXPNcjrNxY9SU2GPFIZ/brGBRoEjSiSwV/4fxUxY73RaYY4Is6v+mv3aZxI4nhkzW5xZW5w4e0HXIafOmTGoSCt/t0uX3IZO43sHOin9CDt/q8ESU+78Xz7yr1e/MPVTYgAAAHicY2BigAAuBuyAiZGJkZmBLTgw1DHIlYEBAAzmAe0A');
  font-family: square;
}

body {
  font-family: square;
  text-align: center;
  font-size: 50px;
}

Подобные фигуры иногда визуализируют неисправность в Windows, например. в Chrome или Edge.

Ожидаемый результат

в Chrome на OSX:

a white square

Фактический результат

в Chrome на Windows

a black square

(вся площадь квадрата окрашена в черный цвет)

Вопрос

В чем здесь проблема? Кто виноват? OSX рендерит что-то не так, как я ожидаю? Windows выводит что-то неправильно, что совершенно правильно? Как мне нарисовать квадрат так, чтобы Windows правильно рендерил?

...