Google 字体 Nanum Gothi c 在 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: "Nanum Gothic"; font-style: normal;">✔Premium web filter and </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: "Nanum Gothic"; font-style: normal;"> app blocker included</span></p></div></div></div></div></body></html>
最佳答案
这是一个可能的错误: https://bugs.chromium.org/p/chromium/issues/detail?id=627143
我建议您引用第 67 条评论以获取可能的解决方案: https://bugs.chromium.org/p/chromium/issues/detail?id=627143#c67
看来字体拥有不同的 ID，这就是问题的原因。
关于html - Chromium 上的字体渲染颜色错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60576473/