Chrome中的字体太模糊了 - 我该如何解决这个问题？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Chrome中的字体太模糊了 - 我该如何解决这个问题？相关的知识，希望对你有一定的参考价值。

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

我也在上传现场：http://impressivefirm.com/dynamics365

以下是用于比较的图像：

Chrome enter image description here

Firefox enter image description here

答案

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

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

从特定的技术角度来看，我认为只有熟悉Chrome渲染引擎工作原理的人才能得到明确的答案，特别是如何将抗锯齿应用于文本。

值得注意的是，它是一个使用相当大的渲染引擎，为Chrome，android浏览器和Opera提供动力。我相信你大约会看到60-70％的互联网用户。

寻找一个实用的解决方案，您可以通过两个独立的容器来解决您的问题，一个容器彼此叠加：一个包含六角形的背景，没有任何内容（应用正确的形状）和一个透明，不旋转或倾斜完全用实际文本。当您可能需要六角形链接时，这会带来矩形链接的缺点。

第二种解决方案，以及我认为制作十六进制网格的正确方法是clip-path技术，结合适当的边距对齐，可能与flexbox相关。

编辑：

这是使用clip-path的示例的精简版和简化版。我试图将你的初始CSS的mods保持在最低限度，并且只删除了我的例子。这是我做的：

  • 消除了歪斜
  • 固定响应（填充，宽度和高度 - 你可能想要自己调整字体大小线高度和其他细节）
  • 试图保持现有的标记和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
以上是关于Chrome中的字体太模糊了 - 我该如何解决这个问题？的主要内容，如果未能解决你的问题，请参考以下文章
 

 Chrome 字体模糊解决


 谷歌浏览器字体模糊


 win10安装的chrome字体显示模糊该怎么弄


 高分屏笔记本第三方chrome浏览器字体模糊怎么办


 chrome 字体发虚模糊是因为啥？


 chrome 字体发虚模糊是因为啥