Chrome中的字体太模糊了 - 我该怎么解决？

Question

我正在使用Segoe UI字体，但在网站的某个特定部分中，Google Chrome浏览器中的字体非常模糊。

我还上传了现场网站：http://impressivefirm.com/dynamics365 以下是比较图片：

Chrome Firefox

- TheEarlyMan

---

你的屏幕截图有点混乱。如果人们点击它们以查看全尺寸版本，第一个将跳转到实际网站而不是截图，第二个则跳转到第一个。你能纠正一下吗？ - Mr Lister

话说，我确实能够重现你的问题。在Firefox中查看网站时，文本和图标比Chrome更清晰。所以你并没有想象中的那样。哦，还有IE11不显示SVG图标。 - Mr Lister

我还添加了一个实时链接，您能看出其中的区别吗？它非常显著。 - TheEarlyMan

这是由于在元素.hexIn上使用了overflow: hidden和rotate3d引起的。 - Morpheus

那仍然不起作用 :( - TheEarlyMan

尝试使用SVG六边形代替在彼此之上应用不同的变换。 - Luuuud

Answer 1

我不认为这与所选字体有任何关系，尽管可能存在不会出现此错误的字体。请参阅类似问题上Woodrow's answer。

简而言之，问题的根源在于您进行了两次倾斜和平移以获得六边形形状。

从特定的技术角度来看，我认为只有那些对Chrome渲染引擎以及特别是如何对文本应用抗锯齿技术有深入了解的人才能给出明确的答案。

值得注意的是，这是一个具有相当大使用率的渲染引擎，支持Chrome、Android浏览器和Opera。我认为你大约在看60-70%的互联网用户。

---

寻找实用解决方案时，您可以通过使用两个分离的容器来绕过问题，一个容器放置六边形背景（应用正确的形状）不包含任何内容，另一个容器透明，没有旋转或倾斜，放置实际文本。这样做的缺点是当您想要六边形链接时会得到矩形链接。

第二种解决方案，我认为制作六边形网格的正确方式是使用 "clip-path" 技术，结合适当的边距对齐，可能可以使用 "flexbox" 实现。

---

编辑：

以下是您的示例的简化版本，使用 clip-path。我尽量保留您初始的 CSS，只删除了破坏我的示例的内容。这是我做的事情：

• 删除了倾斜
• 修复了响应性（填充、宽度和高度 - 您可能需要自己调整字体大小、行高和其他细节）
• 尽量保留现有的标记和 CSS
• 删除了破坏响应性的内容，并简化了一些过于复杂的解决方案 - 至少从我的角度来看
• 我没有使用任何工具来计算角度。如果您想要几何完美，您需要测量它们并微调高度
• 总的原则是，我试图演示一个原则，而不是提供一个生产就绪版本 - 您可能需要微调细节
• 请注意，此技术允许完全控制链接区域。可点击区域为六边形，六边形之间的空间没有链接。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
body {font-family: 'Noto Sans', sans-serif;background-color: #369;}

#hexGrid {
   display: flex;
    flex-wrap: wrap;
    max-width: 840px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 1.1066819197003217rem;
    line-height: 1.5rem;
    list-style-type: none;
    padding: 48px 0;
}
.hex {
    position: relative;
    outline: 1px solid transparent;
    -webkit-clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
    clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
    background-color: white;
    margin-bottom: -7vw;
    box-sizing: border-box;
    height: 33vw;
}
@media (min-width: 680px) {
  .hex {
    height: 224px;
    margin-bottom: -48px;
  }
}
@media (max-width: 600px) {
  .hex {
    height: 50vw;
    margin-bottom: -10.8vw;
    }
}
.hex::after {
    content: '';
    display: block;
    padding-bottom: 86.602%;
    /* =  100 / tan(60) * 1.5 */
}
.hexIn {
    position: absolute;
    width: 96%;
    margin: 0 2%;
    height: 100%;    
}
.hexIn * {
    position: absolute;
    visibility: visible;
}
.hexLink {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    
    border: none;
}
/*** HEX CONTENT **********************************************************************/

.hex h1, .hex p, .hex .icon {
    width: 100%;
    box-sizing: border-box;
    color: #000;
    font-weight: 300;
}
.hex .icon {
    height: 48px !important;
    top: 45%;
    display: block;
    z-index: 2;
            transform: translate3d(0,-100%,0);
}
.hex p {
    top: 60%;
    z-index: 1;
            transform: translate3d(0,-100%,0);
}
.hex h1 {
    top: 27%;
            transform: translate3d(0,100%,0);
    font-size: 20px !important;
    letter-spacing: 1px;
}
/*** HOVER EFFECT  **********************************************************************/
/*
 *.hexLink:hover h1, .hexLink:focus h1,
 *.hexLink:hover p, .hexLink:focus p{
 *  -webkit-transform:translate3d(0,0,0);
 *      -ms-transform:translate3d(0,0,0);
 *          transform:translate3d(0,0,0);
 *}
 *
 */
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) {
    /* <- 5-4  hexagons per row */
    #hexGrid {
        padding-bottom: 4.4%;
    }
    .hex {
        width: 25%;
        /* = 100 / 5 */
    }
    .hex:nth-child(7n+5) {
        /* first hexagon of even rows */
        margin-left: 12.5%;
        /* = width of .hex / 2  to indent even rows */
    }
}
@media (max-width: 1200px) and (min-width:901px) {
    /* <- 4-3  hexagons per row */
    #hexGrid {
        padding-bottom: 5.5%;
    }
    .hex {
        width: 25%;
        /* = 100 / 4 */
    }
    .hex:nth-child(7n+5) {
        /* first hexagon of even rows */
        margin-left: 12.5%;
        /* = width of .hex / 2  to indent even rows */
    }
}
@media (max-width: 900px) and (min-width:601px) {
    /* <- 3-2  hexagons per row */
    #hexGrid {
        padding-bottom: 7.4%;
        max-width: 640px;
    }
    .hex {
        width: 33.333%;
        /* = 100 / 3 */
        
    }
    .hex:nth-child(5n+4) {
        /* first hexagon of even rows */
        margin-left: 16.666%;
        /* = width of .hex / 2  to indent even rows */
    }
}
@media (max-width: 600px) {
    /* <- 2-1  hexagons per row */
    #hexGrid {
        padding-bottom: 11.2%;
    }
    .hex {
        width: 50%;
        /* = 100 / 3 */
    }
    .hex:nth-child(3n+3) {
        /* first hexagon of even rows */
        margin-left: 25%;
        /* = width of .hex / 2  to indent even rows */
    }
}
@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}

<ul id="hexGrid">
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/sales" target="_blank">
            <div class="filler"></div>
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#strengthandscale"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Sales</h1>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/customer-service" target="_blank">
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#customer-service"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Customer Service</h1>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/operations" target="_blank">
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#operations"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Operations</h1>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/financials" target="_blank">
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#financials"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Financials</h1>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/field-service" target="_blank">
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#field-service"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Field Service</h1>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/project-service-automation" target="_blank">
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#project-service"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Project Service</h1>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/marketing" target="_blank">
            <svg class="icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#marketing"></use>
            </svg>
            <p>Dynamics 365 for</p>
            <h1>Marketing</h1>
          </a>
        </div>
      </li>
    </ul>

注意事项：

• 我不太喜欢按百分比填充的响应式设计，所以我删除了其中的一部分，因为它真的很容易破坏响应式布局。
• 从我的角度来看，您的标记和CSS过于复杂，这是问题的根源。CSS应尽可能简单和可控。

- tao

---

Edge？你能为此提供一个报价吗？（根据我的测试，我会说Edge看起来更像Trident而不是其他任何东西。）Opera和Android，可以的。 - Mr Lister

@MrLister他们使用自己的渲染引擎EdgeHTML.dll。这里有一篇文章，作者是微软高级工程师Jacob Rossi，提供了一些细节信息。从使用和调试来看，我将其与-webkit联系起来，而不是Trident，并且在实践中它们的行为非常不同。但你可能是对的，它不是Chrome使用的相同引擎，它们之间的差异可能比我最初想象的要大得多。 - tao

模糊的原因是某些属性触发了GPU加速渲染（特别是rotate3d）。 GPU渲染往往会导致文本不够清晰。有关更多详细信息，请参见此答案。 - Woodrow Barlow

@WoodrowBarlow，你的意思是字体确实很重要，有些字体在翻转时可以正确地呈现？ - tao

@AndreiGheorghiu 不一定。只是GPU渲染和CPU渲染的抗锯齿方式不同，这通常会导致文字稍微模糊。字体选择可能与此无关。 - Woodrow Barlow

更多权威信息请参见：https://dev.opera.com/articles/css-will-change-property/ - Woodrow Barlow

Answer 2

我通过在Chrome中进入SETTINGS>>>ADVANCED>>>SYSTEM并关闭/禁用“尽可能使用硬件加速”来解决了这个问题。我以前在XP时代也看到过这种类型的错误 - 与某些图形驱动程序/更新相关 - 这影响了Adobe阅读器/完整产品。删除特定于浏览器的驱动程序（版本翻译）组件，应用程序将默认为操作系统设置。

- mqteckie

---

我并没有看到这个重置有什么真正的区别。粗体文本边缘仍然模糊。奇怪的是，还没有人向Chrome反映这个问题。 - Trunk