html - 跨浏览器上的字体排版问题

Question

我在我的网站中使用 nova-font，但它在 Firefox 中看起来不同（A-bit-zoom-and-more-sharp）。是否有任何解决方案使其在 Chrome 和 Firefox 上看起来都一样？

标签： htmlcssweb-testinggoogle-web-designer

Answer 1

浏览器中的字体渲染是不同的，因此可以进行一些调整以使其不那么糟糕，但由于浏览器中的渲染引擎不同，尚未实现跨浏览器像素完美字体渲染（2019 年中期）。

我可以给你一些关于如何改进代码的提示——如果你用谷歌搜索这些属性，你会发现更多关于它们的信息：

html {
      /* Adjust font size */
      font-size: 100%;
      -webkit-text-size-adjust: 100%;
      /* Font varient */
      font-variant-ligatures: none;
      -webkit-font-variant-ligatures: none;
      /* Smoothing */
      text-rendering: optimizeLegibility;
      -moz-osx-font-smoothing: grayscale;
      font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
      text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  }