跨浏览器上的字体排版问题
Font typograpghy issue on cross browser
我在我的网站上使用 nova-font,但它在 Firefox 中看起来不同(有点缩放和更清晰)。有什么解决方案可以让 Chrome 和 Firefox 看起来一样吗?
Font-rendering 在浏览器中是不同的,所以可以做一些调整来减少它的恶化,但跨浏览器像素完美字体渲染尚未(2019 年年中)因为不同在浏览器中渲染引擎。
我可以给你一些关于如何改进你的代码的提示 - 如果你google你会发现更多关于它们的属性:
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;
}
我在我的网站上使用 nova-font,但它在 Firefox 中看起来不同(有点缩放和更清晰)。有什么解决方案可以让 Chrome 和 Firefox 看起来一样吗?
Font-rendering 在浏览器中是不同的,所以可以做一些调整来减少它的恶化,但跨浏览器像素完美字体渲染尚未(2019 年年中)因为不同在浏览器中渲染引擎。
我可以给你一些关于如何改进你的代码的提示 - 如果你google你会发现更多关于它们的属性:
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;
}