CSS - 我如何处理serif和sans-serif字体之间的大小差异？

Question

我正在研究一个WordPress，它将允许网站管理员在无衬线字体和衬线字体之间切换。

我试图以这样的方式编码样式表，字体大小是否相似，无论他们选择格鲁吉亚还是Arial。

问题是，当我用衬线字体看起来不错时，它看起来太大，当在无衬线。然后当我用无衬线字体调整它看起来不错时，它看起来在衬线上太小了。

是否有一个理想的字体大小和行高，适用于serif和sans-serif？

还是需要制作单独的样式表（一个农奴版本和一个无衬线版本）？

P.S.我已经在主体上设置了12px的基本字体大小，然后将其余字体大小设置为基本百分比。当然，这个基本字体大小可以用ems或百分比来设置，因为百分比仍然会按比例缩放。

Answer 1

您遇到的问题与不同字体的不同相对x高度有关，这只是在技术术语中重复您的原始问题：Georgia @ 12px不等于Arial @ 12px。这是由于字体的方面价值。

有一个css3属性“font-size-adjust”，它理论上将所有字体的x高度均衡为您指定的字体的高度，但我不确定它是广泛支持还是支持。你可以阅读一下@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

希望有些帮助。

Answer 2

嗯，首先我会使用时间，除非你有令人信服的理由使用％。同样在12px的基本字体大小，我喜欢设置我的线高度为1.25或1.5 em（15或18像素）。然后你需要找到一个近似于无衬线的间距的衬线字体，反之亦然。如果你研究“字体堆栈”，你可以找到一些很好的信息，说明什么样的字体可以一起使用。

Answer 3

感谢您的答案。这里非常有用的信息。我学习了一些关于字体堆栈和我以前不知道的相对大小的东西。我将为用户提供更改字体大小的功能，并“调整”它们以符合他们的喜好。