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

Question

3

我正在开发一个WordPress网站，允许管理员在无衬线字体和有衬线字体之间进行切换。

我试图编写样式表，使得无论选择Georgia还是Arial，字体大小都相似。

问题在于，当我使用有衬线字体时，它看起来非常漂亮，但在无衬线字体中看起来太大了。当我调整为无衬线字体时，它在有衬线字体中看起来太小了。

是否有一种理想的字体大小和行高，适用于有衬线和无衬线字体？

或者我需要制作单独的样式表（一个有衬线版本和一个无衬线版本）？

附注：我已经在body上设置了基础字体大小为12px，然后将其余字体大小设置为基础字体的百分比。当然，这个基础字体大小可以以em或百分比设置，因为百分比仍然按比例缩放。

- orbit82

3个回答

1

首先，我会使用 em，除非你有一个充分的理由要使用%。此外，在12像素基础字体大小下，我喜欢将我的行高设置为1.25或1.5 em（即15或18像素）。然后，您需要找到一个类似于无衬线字体间距的衬线字体...或反之亦然。如果您研究“字体堆栈”，您可以找到一些关于哪些字体适合一起使用的好信息。

- prodigitalson

感谢您的回答。相比 ems，使用百分比的一个好理由是什么？另外，您认为在样式表的下方为每个元素设置单独的无单位行高，还是在 body 上设置一个基础行高会更好？ - orbit82

0

感谢你们两位的回答。这里提供了非常有用的信息。我学到了一些关于字体堆栈和相对大小的知识，这是我以前不知道的。我将为用户提供更改字体大小并“微调”它们以符合他们喜好的功能。

- orbit82

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HandiworkNYC.com · Accepted Answer

你遇到的问题与不同字体相对x高度有关，这只是用技术术语重复了你最初的问题：Georgia @ 12px并不等于Arial @ 12px。这是由于字体的外观值造成的。

CSS3属性“font-size-adjust”在理论上将使所有字体的x高度等于您指定的字体，但我不确定它是否被广泛支持或根本支持。您可以在http://www.fonttester.com/help/css_property/font-size-adjust.html中阅读有关它的信息。

您可以查看这个页面，其中包含一个JavaScript解决方案：

最后，关于你的问题，这是w3文档：

希望其中一些有所帮助。