个人中心
gpt4 book ai didi

html - Chromium 上的字体渲染颜色错误

转载 作者：行者123 更新时间：2023-12-04 18:28:55 25 4
gpt4 key购买 nike

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

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

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

有什么建议是什么原因造成的？

正确

enter image description here

错误

enter image description here

密码笔

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>

最佳答案

这是一个可能的错误:
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/

25 4 0
文章推荐： angular - Cypress 坚持使用 Chrome stable 80
文章推荐： node.js - 我无法将 Angular/Cli 安装到我的 ubuntu 18 系统上
文章推荐： windows - Windows 上 Ubuntu 的 Firefox X11 无法正常工作
文章推荐： php - 通过终端错误在 Digital Ocean Ubuntu 中更新 Composer
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com