我不认为这与所选字体有任何关系,尽管可能存在没有出现此错误的字体。
简而言之,问题的根源在于您为了获得十六进制形状而倾斜和平移两次。
从特定的技术角度来看,我认为只有熟悉Chrome渲染引擎工作原理的人才能得到明确的答案,特别是如何将抗锯齿应用于文本。
值得注意的是,它是一个使用相当大的渲染引擎,为Chrome,Android浏览器和Opera提供动力。 我相信你大约会看到60-70%的互联网用户。
寻找一个实用的解决方案,您可以通过两个独立的容器来解决您的问题,一个容器彼此叠加:一个包含六角形的背景,没有任何内容(应用正确的形状)和一个透明,不旋转或倾斜完全用实际文本。 当您可能需要六角形链接时,这会带来矩形链接的缺点。
第二个解决方案,以及我认为制作十六进制网格的正确方法是clip-path技术,结合适当的边距对齐以及可能与flexbox一起flexbox 。
编辑:
这是使用clip-path示例的精简版和简化版。 我试图将初始CSS mod保持在最低限度,只删除了破坏我的例子。 这是我做的:
消除了歪斜
固定响应(填充,宽度和高度 - 你可能想要自己调整字体大小线高度和其他细节)
试图保持现有的标记和CSS
删除了破坏响应的内容并简化了一些过于复杂的解决方案 - 至少从我的角度来看
我没有使用任何工具来计算角度。 如果你想要它们几何完美,你会想要测量它们并微调高度
作为一般规则,我试图展示一个原则,而不是提供生产就绪版本 - 你可能需要微调细节
请注意,此技术可以完美控制链接区域。 可点击区域为六边形,六边形之间的空间未链接。
@import url('/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应该尽可能简单和可控。
最好的问候和快乐的编码! ::} ::
html 弹框字体模糊 html - Chrome中的字体太模糊了 - 我该如何解决这个问题? - 堆栈内存溢出...