CSS:理解和调整字体的行距/行高

2024-05-14

有人问了一个非常相似的问题here https://stackoverflow.com/questions/13701110/css-remove-line-height-leading-on-larger-text但确实回答得足够了......

CSS line-height 属性控制字母上方的空白量。使其变大/变小,可以使文本行距离更远/更近。但是,如果将行高设置为与字体大小完全相同的值,文本上方仍然会有空白。

所以这不太管用......

div { height: 80px; }
span { font-size : 80px; line-height : 80px; }
<div>
<span>Foo</span>
</div>

http://jsfiddle.net/s_d_p/yMHVs/ http://jsfiddle.net/s_d_p/yMHVs/

所包含的文本与容器高度的实际匹配程度似乎因字体而异。

所以我的问题分为两部分:

  1. 当我们设置行高时,我们实际上在调整什么?

  2. 有没有办法将其完全移除,以便字母精确地放入容器内?


请注意,剩余/额外空间通常是所使用字体的症状,由其设计者指定。

因此,80px 包括上面和/或下面分配的空白区域。上面的额外空白通常是为了允许重音字符而提供的,否则需要压缩字母本身,从而产生不一致的字体。

See here https://stackoverflow.com/questions/20119878/how-to-remove-space-at-top-of-p-tag-align-contained-text-to-top-of-container & 此处了解更多信息 https://stackoverflow.com/questions/20244305/why-browsers-reserve-space-for-accented-characters-even-if-there-is-not-one.

行高是指字体的总高度,包括任何分配的空白。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:理解和调整字体的行距/行高 的相关文章

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • jQuery 生成 div 和碰撞检测

    所以我的学校作业项目快要结束了 我只是错过了两件我似乎无法弄清楚的主要事情 1 如何生成具有随机位置的间隙的管道障碍物 以便鸟可以飞过 尝试使用一个函数来更改间隙位置的管道 div 的 css right attr 并在以下情况下移除管道它
  • 将 SVG 的高度设置为行高?

    我想将我的 SVG 图像作为图标包含在标题旁边 h1 img src icon sell svg class icon Verkaufen h1 字体大小为h1 is 36px和line heigt is 1 1 我使用检查器工具发现计算出
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐