CSS - 如何处理衬线字体和无衬线字体之间的大小差异？
我正在开发一个 WordPress，它允许站点管理员在无衬线字体和衬线字体之间切换。
我正在尝试以这样的方式对样式表进行编码，无论他们是否选择 Georgia 与 Arial，字体大小都相似。
问题是，当我使用衬线字体看起来不错时，使用无衬线字体时它看起来太大了。然后当我将其调整为在无衬线字体中看起来不错时，它在衬线字体中看起来太小了。
是否有一个理想的字体大小和行高可以同时适用于衬线和无衬线？
或者我是否需要制作单独的样式表（农奴版本和无衬线版本）？
PS 我已将正文的基本字体大小设置为 12px，然后将其余字体大小设置为基本字体大小的百分比。当然，这个基本字体大小可以以 em 或百分比为单位设置，因为百分比仍会按比例缩放。
I'm working on a WordPress that will allow the site administrator to switch between sans-serif and serif fonts.
I'm trying to code the stylesheet in such a way that the font sizes are similar whether or not they choose Georgia vs Arial.
The problem is that when I have it looking nice with a serif font, it looks WAY too big when in sans-serif. When I then adjust it to look nice in a sans-serif font, it looks WAY too small in serif.
Is there an ideal font size and line-height that works well with both serif and sans-serif?
Or do I need to make separate stylesheets (a serf version and a sans-serif version)?
P.S. I've set a base font size on the body at 12px, and then set the rest of the font sizes as a percentage of the base. Of course, this base font size could be set in ems or in percent, because the percentages will still scale proportionally.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您遇到的问题与不同字体的不同相对 x 高度有关，这只是用技术术语重复您的原始问题：Georgia @ 12px 不等于 Arial @ 12px。这是由于字体的宽高比值造成的。
有一个 css3 属性“font-size-adjust”，理论上它会将所有字体的 x 高度等于您指定的字体，但我不确定它是否得到广泛支持，或者根本不支持。您可以阅读@ http://www.fontester.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
希望其中有帮助。
The issue you're running into is related to the different relative x-height of different fonts, which is just repeating your original issue in technical terms: Georgia @ 12px does not equal Arial @ 12px. This is due to the fonts' aspect value.
There is a css3 property "font-size-adjust" which will in theory equalize the x-height of all fonts to the one you specify, but I'm not sure if it's widely supported, or supported at all. You can read about it @ http://www.fonttester.com/help/css_property/font-size-adjust.html
You can check out this page, which has a javascript solution:
http://www.brunildo.org/test/xheight.pl
And finally, the w3 documentation for your issue:
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro
hope some of that helps.
好吧，首先我会使用 em，除非你有令人信服的理由使用 %。同样，在 12 像素基本字体大小下，我喜欢将行高设置为 1.25 或 1.5 em（15 或 18 像素）。然后，您需要找到一种与无衬线字体近似的衬线字体……反之亦然。如果您研究“字体堆栈”，您可以找到一些关于哪些字体适合一起使用的好信息。
Well first I would use em unless you have a compelling reason to use %. Also at a 12px base font size I like to set my line height to 1.25 or 1.5 em (15 or 18 px). Then you need to find a serif font that approximates the spacing of the sans serif... or vice versa. If you research "font stacks" you can find some good information on what fonts are good to use together.
感谢您的回答。这里的信息非常有用。我了解了一些我以前不知道的关于字体堆栈和相对大小的知识。我将为用户提供更改字体大小并“调整”它们以符合他们的喜好的能力。
Thanks for both of your answers. Very helpful information here. I learned some things about font stacks and relative sizes that I didn't know before. I'm going to offer users the ability to change their font sizes and "tweak" them to match their liking.