CSS-如何处理衬线字体和无衬线字体之间的大小差异?

前端之家收集整理的这篇文章主要介绍了CSS-如何处理衬线字体和无衬线字体之间的大小差异? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用wordpress,它将允许站点管理员在sans-serif和serif字体之间切换.

我正在尝试以这种方式对样式表进行编码,无论它们是否选择Georgia与Arial,字体大小都相似.

问题是当我使用衬线字体看起来不错时,使用sans-serif时看起来太大了.然后,当我将其调整为无衬线字体时看起来不错时,衬线看起来太小了.

是否有理想的字体大小和行高,同时适合衬线字体和无衬线字体?

还是我需要制作单独的样式表(农奴版和无衬线版)?

附言我在主体上将基本字体大小设置为12px,然后将其余字体大小设置为基本字体的百分比.当然,此基本字体大小可以以ems或百分比设置,因为百分比仍将按比例缩放.

最佳答案
您遇到的问题与不同字体的相对x高度有关,这只是从技术角度重复了您的原始问题:Georgia @ 12px不等于Arial @ 12px.这是由于字体的宽高比值.

理论上有一个css3属性“ font-size-adjust”,它将使所有字体的x-height与您指定的字体高度相等,但是我不确定它是否得到广泛支持或完全受支持.您可以在http://www.fonttester.com/help/css_property/font-size-adjust.html上阅读

您可以查看此页面,该页面具有javascript解决方案:

http://www.brunildo.org/test/xheight.pl

最后,您问题的w3文档:

http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

希望其中的一些帮助.

原文链接:https://www.f2er.com/css/530767.html

猜你在找的CSS相关文章