首页  >  文章  >  web前端  >  CSS 中字体大小背后的真实故事是什么:仅仅是上升部分和下降部分的高度吗?

CSS 中字体大小背后的真实故事是什么:仅仅是上升部分和下降部分的高度吗?

Patricia Arquette
Patricia Arquette原创
2024-11-09 04:04:01719浏览

What's the Real Story Behind Font Size in CSS: Is it Just the Height of the Ascenders and Descenders?

确定 CSS 中字母的实际高度:揭开真实的字体大小

尽管常见的假设是在CSS 直接对应于上升部分的高度(某些字母的上部部分,如“h”和“l”)下降部分(字母的下部,如“g”和“y”),真实的测量可能更复杂。

历史视角:Em

历史上, “em”是指刻在金属上的单个字母的块大小。由于大写“M”通常占据最大的空间,因此它的大小决定了整体“em”的大小。如今,字体开发人员在设计字体时不受物理限制,使“em”成为虚拟概念。

标准:OpenType 和 TrueType

在 OpenType 字体中,em 大小为设置为 1000 个单位,而在 TrueType 字体中,通常为 1024 或 2048。理想情况下,字体大小应为使用“em”单位定义,指的是字体的 x 高度,而不是像素高度。

单位转换:点、Pica 和 PPI

“点”是印刷术中常用的测量单位。根据惯例,一个点的范围可以是 0.188mm 到 0.4mm。 “异食癖”是一个较旧的单位,等于 12 点。不同屏幕分辨率之间的“ppi”(每英寸像素数)差异很大。

浏览器渲染:跨实现的差异

尽管存在标准,但实际尺寸字体字形根据字体开发人员的设计方式以及不同浏览器的呈现方式而有所不同。例如,Apple Zapfino 脚本字体被放大,使小写字母更清晰。

字体开发工具:探索基础知识

为了更深入地了解字体大小,考虑使用免费字体开发工具,例如 FontForge。这些工具允许您创建自己的字体并尝试不同的大小调整技术。

结论

了解 CSS 中字母的真实高度需要了解历史惯例,字体标准和浏览器特定的渲染差异。通过利用上述资源,您可以更全面地了解网页设计这一基础主题。

以上是CSS 中字体大小背后的真实故事是什么:仅仅是上升部分和下降部分的高度吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn