【问题标题】:CSS - how can I handle the size difference between serif and sans-serif fonts?CSS - 如何处理 serif 和 sans-serif 字体之间的大小差异?
【发布时间】:2011-02-09 23:13:50
【问题描述】:

我正在开发一个允许站点管理员在无衬线字体和衬线字体之间切换的 WordPress。

我正在尝试以这样一种方式对样式表进行编码,以使无论他们选择 Georgia 还是 Arial,字体大小都相似。

问题是当我用衬线字体让它看起来不错时,它在无衬线字体时看起来太大了。当我将它调整为在无衬线字体中看起来不错时,它在衬线字体中看起来太小了。

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

或者我需要制作单独的样式表(一个农奴版本和一个无衬线版本)?

附:我已将正文的基本字体大小设置为 12 像素,然后将其余字体大小设置为基本字体的百分比。当然,这个基本字体大小可以设置为 em 或百分比,因为百分比仍会按比例缩放。

【问题讨论】:

    标签: css fonts


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

      您遇到的问题与不同字体的不同相对 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

      希望对你有所帮助。

      【讨论】:

        【解决方案3】:

        首先我会使用 em,除非你有令人信服的理由使用 %。同样在 12 像素的基本字体大小下,我喜欢将行高设置为 1.25 或 1.5 em(15 或 18 像素)。然后你需要找到一种近似于无衬线间距的衬线字体......反之亦然。如果您研究“字体堆栈”,您可以找到一些关于哪些字体适合一起使用的有用信息。

        【讨论】:

        • 感谢您的回答。使用百分比与 ems 的充分理由是什么?另外,您认为最好在主体上设置一个基线行高还是在样式表的下方为每个元素提供自己的无单位行高?
        猜你喜欢
        • 2021-04-09
        • 1970-01-01
        • 1970-01-01
        • 2017-01-13
        • 2012-11-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多