我不认为这与所选字体有任何关系，尽管可能存在没有出现此错误的字体。

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

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

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

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

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

编辑：

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

消除了歪斜

固定响应(填充，宽度和高度 - 你可能想要自己调整字体大小线高度和其他细节)

试图保持现有的标记和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) { /*

• Dynamics 365 for

  Sales

• Dynamics 365 for

  Customer Service

• Dynamics 365 for

  Operations

• Dynamics 365 for

  Financials

• Dynamics 365 for

  Field Service

• Dynamics 365 for

  Project Service

• Dynamics 365 for

  Marketing

附注：

我不完全是填充百分比响应的粉丝，所以我删除了部分内容，因为它真的搞乱了响应性。

从我看到它，你的标记和CSS是不必要的复杂，这是问题的根源。 CSS应该尽可能简单和可控。

最好的问候和快乐的编码！ ::} ::