Рендеринг шрифта неправильного цвета на Chromium - PullRequest
Новая
       7

Рендеринг шрифта неправильного цвета на Chromium

2 голосов
/ 07 марта 2020

Шрифт Google Nanum Gothi c отображает неправильный цвет на Chromium и Ubuntu. Цвет отображается так, как ожидается для других комбинаций браузера и ОС. Например, шрифт правильно отображается в Chromium и MacOS.

Два изображения иллюстрируют проблему: по какой-то причине галочка отображается серым, а не желтым цветом. (Странный интервал - отдельная проблема.)

Мы тестировали на Ubuntu 18.04 и Chromium 80.0.3987.0 (r722234).

Есть предложения, что это вызывает?

Правильно

enter image description here

Неправильно

enter image description here

Codepen

https://codepen.io/Crashalot/pen/9e51b87f9199ae917aeee69ed6dc4866

HTML

<html><head>
   <link href="/stylesheets/reset.css?1547166062" media="screen" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:regular" rel="stylesheet">
<style>


   body {
      background: transparent;
   }


   #designBox {
      transform-origin: 0 0;
      position: absolute;
      background: transparent;
      margin: auto;
      cursor: pointer;
      overflow: hidden;
   }


   .itemBox, .itemBox > * {
      position: absolute;
      box-sizing: border-box;
   }


   .backgroundColorBox, .backgroundGraphicBox, .foregroundBox, .frameBox {
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-color: transparent;
      background-position: center;
      background-repeat: no-repeat;
      pointer-events: none;
   }


   .backgroundColorBox.design, .backgroundGraphicBox.design  {
      position: absolute;
      pointer-events: auto;
   }


   .backgroundGraphicBox {
      background-position: initial;
      background-repeat: repeat;
   }


   .itemBox.text .ql-editor {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: visible;
      opacity: 1;
      cursor: text;
   }


   .itemBox.text .foregroundBox * {
      line-height: 1em;
   }


   .itemBox.text p {
      margin: 0;
      padding: 0;
      caret-color: black;
      pointer-events: initial;
   }


   .itemBox.text p:last-child {
      margin: 0;
   }


   #designBox {
      transform: scale(1.0);
   }
</style></head>


<body><div id="designBox" style="width: 1000px; height: 1000px;" data-preserve-aspect-ratio="1" data-font-list="Nanum+Gothic:regular">

    <div class="backgroundColorBox design" style="left: 0px; top: 0px; width: 1000px; height: 1000px; background: rgb(51, 51, 51);"></div>

<div class="itemBox text" id="MFExztST243v" style="top: 387px; left: 63px; width: 866px; height: 264px;"><div class="foregroundBox ql-container ql-disabled" style="width: 866px; height: 264px; top: 0px; left: 0px;"><div class="ql-editor" data-gramm="false" contenteditable="false" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"><p style="align-self: flex-start;"><span style="letter-spacing: 0em; font-weight: 400; line-height: 1.5; font-size: 72px; color: rgb(255, 193, 7); font-family: &quot;Nanum Gothic&quot;; font-style: normal;">✔Premium web filter and&nbsp;</span></p><p style="align-self: flex-start;"><span style="letter-spacing: 0em; font-weight: 400; line-height: 1.5; font-size: 72px; color: rgb(255, 193, 7); font-family: &quot;Nanum Gothic&quot;; font-style: normal;">&nbsp;&nbsp;&nbsp;app blocker included</span></p></div></div></div></div></body></html>

Ответы [ 2 ]

3 голосов
/ 17 марта 2020

Это возможная ошибка: https://bugs.chromium.org/p/chromium/issues/detail?id=627143

Я отправлю вам комментарий 67 для возможного решения: https://bugs.chromium.org/p/chromium/issues/detail?id=627143#c67

Похоже, что шрифты имеют разные идентификаторы, что является причиной проблемы.

0 голосов
/ 21 марта 2020

В конечном итоге проблема заключалась в том, что флажок обрабатывался шрифтом Apple emoji, установленным на сервере, в результате чего флажок отображался серым цветом.

...