Chrome 中的字体太模糊 - 我该如何解决？

Question

我正在使用 Segoe UI 字体，并且在网站的特定部分中，该字体在 Google Chrome 中非常模糊。

我也在上传直播网站：http://impressivefirm.com/dynamics365

以下是对比图片：

铬

火狐

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 应尽可能简单和可控。

Answer 2

我通过在 Chrome 中进入设置>>>高级>>>系统并关闭/禁用“尽可能使用硬件加速”解决了这个问题。我以前在 XP 时代见过这种类型的错误——与某些图形驱动程序/更新有关——它影响了 Adob​​e 阅读器/完整产品。删除特定于浏览器的驱动程序（版本转换）组件，应用程序将默认为操作系统设置。