Chromium 上的字体渲染颜色错误答案

【问题标题】：Font rendering in wrong color on ChromiumChromium 上的字体渲染颜色错误
【发布时间】：2020-06-19 22:07:00
【问题描述】：

Google 字体 Nanum Gothic 在 Chromium 和 Ubuntu 上呈现错误的颜色。颜色呈现为其他浏览器和操作系统组合的预期。例如，字体可以在 Chromium 和 MacOS 上正确呈现。

两张图片说明了问题：由于某种原因，复选标记呈现为灰色而不是黄色。（奇怪的间距是一个单独的问题。）

我们在 Ubuntu 18.04 和 Chromium 80.0.3987.0 (r722234) 上进行了测试。

有什么建议吗？

正确

错误

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>

【问题讨论】：

使用命令行参数启动 Chromium 时，您是否看到相同的结果：--force_fieldtrials？
字体是否在任何测试用例中本地安装？
@killscreenmike 好问题。不，这不对。有什么建议吗？
@Asesh 尝试在本地安装字体，或仅使用本地可用的字体，看看问题是否仍然存在。

标签： html css google-chrome ubuntu chromium

【解决方案1】：

最终的问题是，复选标记是从服务器上安装的 Apple emoji 字体呈现的，导致复选标记显示为灰色。

【讨论】：

【解决方案2】：

这是一个可能的错误： https://bugs.chromium.org/p/chromium/issues/detail?id=627143

我会建议您参考第 67 条评论以获取可能的解决方案： https://bugs.chromium.org/p/chromium/issues/detail?id=627143#c67

似乎字体拥有不同的 ID，这是导致问题的原因。

【讨论】：

嗨，这不是解决方案，而是奖励您花时间进行调查的赏金。感谢您的帮助！
我很感激。对不起，它没有帮助！
也许将来会对某人有所帮助。 :)