Html Chromium上错误颜色的字体渲染
谷歌字体c在Chromium和Ubuntu上呈现的颜色不正确。对于其他浏览器和操作系统组合，颜色按预期进行渲染。例如，在Chromium和MacOS上正确呈现字体 这两幅图像说明了这个问题：出于某种原因，复选标记呈现为灰色而不是黄色。（奇怪的间距是另一个问题。） 我们在Ubuntu 18.04和Chromium 80.0.3987.0（r722234）上进行了测试 有什么建议导致这种情况吗 正确 错误 Codepen HTMLHtml Chromium上错误颜色的字体渲染,html,css,google-chrome,ubuntu,chromium,Html,Css,Google Chrome,Ubuntu,Chromium,谷歌字体c在Chromium和Ubuntu上呈现的颜色不正确。对于其他浏览器和操作系统组合，颜色按预期进行渲染。例如，在Chromium和MacOS上正确呈现字体 这两幅图像说明了这个问题：出于某种原因，复选标记呈现为灰色而不是黄色。（奇怪的间距是另一个问题。） 我们在Ubuntu 18.04和Chromium 80.0.3987.0（r722234）上进行了测试 有什么建议导致这种情况吗 正确 错误 Codepen HTML <html><head> <
<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>
身体{
背景：透明；
}
#设计箱{
变换原点：0；
位置：绝对位置；
背景：透明；
保证金：自动；
光标：指针；
溢出：隐藏；
}
.itemBox、.itemBox>*{
位置：绝对位置；
框大小：边框框；
}
.backgroundColorBox、.backgroundGraphicBox、.foregroundBox、.frameBox{
宽度：100%；
身高：100%；
背景大小：100%100%；
背景色：透明；
背景位置：中心；
背景重复：无重复；
指针事件：无；
}
.backgroundColorBox.design、.backgroundGraphicBox.design{
位置：绝对位置；
指针事件：自动；
}
.背景图片框{
背景位置：初始；
背景重复：重复；
}
.itemBox.text.ql编辑器{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
溢出：可见；
不透明度：1；
光标：文本；
}
.itemBox.text.foregroundBox*{
线高：1米；
}
.itemBox.text p{
保证金：0；
填充：0；
插入符号颜色：黑色；
指针事件：初始；
}
.itemBox.text p:最后一个子项{
保证金：0；
}
#设计箱{
变换：比例（1.0）；
}
✔包括高级web筛选器和应用程序阻止程序
似乎字体具有不同的ID，这是问题的原因。最终问题在于，复选标记是从安装在服务器上的Apple emoji字体呈现的，导致复选标记显示为灰色。当使用命令行参数启动Chromium时，您是否看到相同的结果：
--force_fieldtrials