Line-Height与font-size不匹配
在网页排版中，行高（Line-Height）与字体大小（font-size）的搭配是非常重要的，它们直接影响到文本的排版效果和视觉体验。
- Line-Height 表示文本行的垂直高度，即文本行与行之间的距离。通常情况下，Line-Height 的值等于字体大小的值。但有时候为了特殊排版需要，也可以设置 Line-Height 大于字体大小。
- font-size 表示字体的大小，通常以像素为单位。比如，
14px表示字体大小为 14 像素。
在设置 Line-Height 和 font-size 时，需要确保它们的值匹配，以保持文本有良好的排版效果。如果 Line-Height 与 font-size 不匹配，可能会导致文本换行不均匀、排版混乱，或者文字过大或过小，影响视觉体验。
推荐使用以下方法来设置 Line-Height 和 font-size：
- 保持 Line-Height 与 font-size 的值相同，以保持一致性。
- 如果需要，可以使用
em单位来定义字体大小，使得在不同尺寸的设备上字体大小能够自适应。例如，如果定义字体大小为1.5em，那么在 16px 像素屏幕上的字体大小为 16px，而在 32px 像素屏幕上的字体大小为 32px。 - 使用 CSS 的
line-height属性来设置 Line-Height。例如：
p {
line-height: 1.5;}
总之，在网页排版中，保持 Line-Height 与 font-size 的值匹配，或者使用 em 单位来定义字体大小，以及使用 CSS 的 line-height 属性来设置 Line-Height，可以帮助我们实现良好的文本排版和视觉体验。
相关·内容
2回答
我正在尝试创建一个网站上的“保存网页为位图”的-function，我有一些问题，在服务器端渲染文本的正确大小。
客户端上文本的字体大小设置为：
.textDiv
{
font-family: Verdana;
font-size:16px;
}
如果我尝试在服务器上使用
float emSize = 16;
g.DrawString("mytext", new Font("Verdana", emSize), Brushes.Black, x, y);
文本在服务器上将变得大约大20%。
new Font()的说明第二个参数(字体大小)应该在em
浏览 4提问于2009-01-27得票数 6
回答已采纳
2回答
排版:关于EM的快速问题
、、、、
假设我有以下代码：
<html>
<body>
<header>
<h1>
Hello World
</h1>
</header>
</body>
</html>
body{
// make 1em equivalent to 10px when browser default is 16px
font-size: 62.5%;
}
header{
font-size: 1em;
}
header h1{
fon
浏览 1提问于2011-05-23得票数 2
回答已采纳
3回答
像font-size这样的浏览器的默认line-height是16px
我应该为哪些HTML元素定义line-height，哪些不应该？
给body { }提供行高的背后原因是什么？
line-height会对单行文本产生影响吗？
如果我在em中使用字体，那么我是否也应该在em中使用use line-height
line-height和font-size之间的相互关系是什么
浏览 6提问于2010-04-29得票数 1
回答已采纳
3回答
我在我的网站CSS中使用了em单元。当我在Chrome中加载网站的页面时，所有的文本都会以非常大的字体加载。如果我调整浏览器窗口的大小或加载开发人员控制台，字体大小将恢复到“正确”大小。有时，如果我浏览网站上的页面，它会做同样的事情或表现不稳定(从大的开始，有时从正常的大小开始)。
我不能在Safari或Firefox中复制它，所以我认为这一定是Chrome解释我的CSS或em单元的方式的问题。
你知道为什么会发生这样的事情吗？如果我删除所有的em单元并使用px，那么它工作得很好(这可能是一个解决方案，但不能帮助我理解em)。
(使用:Chrome32，Macbook Air，OS 10.8.
浏览 4提问于2014-02-09得票数 2
2回答
当将1em应用于一个元素时，它将采用浏览器的默认值(通常为16px)或其父元素的字体大小值，对吧？但我注意到，如果在h1元素中使用类似margin-top: 1em的内容(不使用重置样式表，因此将h1设置为font-size: 32px)，则1em等于32px，即使其父元素设置为font-size: 16px。
然而，使用像font-size: 100%；这样的东西来解决这个差异。
我遗漏了什么？
浏览 1提问于2012-02-29得票数 18
回答已采纳
我目前正在开发一个站点，我不明白为什么文本在IE10中显示的比Chrome大。(我已经确保这两种浏览器都设置为100%缩放-不多，也不差。)
我的CSS：body { font-size: 1em; }中有一个重置。在Chrome (v27.0.1453.116米)中，这将如预期的那样显示--如果我将CSS中的规则更改为font-size: 100%;或font-size: 16px;，则不会发生明显的变化。对我来说，这表明在Chrome中，1em =16 in。但是比例字体大小(em和%)在IE中显示的要大得多，似乎是1em =21 be。
我有两个图片显示不同的时候body { font-
浏览 7提问于2013-07-02得票数 11
回答已采纳
我所看到的CSS如下所示：
header .logo {
text-align: center;
line-height: 77px;
font-size: 4em;
font-weight: bold;
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Ari
浏览 1提问于2013-10-08得票数 1
回答已采纳
2回答
我从像这一个这样的线程中了解到，ems的目的是定义网页中的所有度量，通过基本字体大小来定义，这可以由浏览器来设置。
例如，在Chrome中，您可以通过使用settings -> show advanced settings -> web content -> font size: very large来实现这一点。我可能会这样做，如果我使用的是一个大的，高分辨率的显示器，那是遥远的。
我创建了一个柱塞，它演示了ems和px在调整大小方面的差异。
#div1 {
width: 320px
}
#div2 {
width: 20em;
}
如果在我的浏览器中将字体大小
浏览 0提问于2016-10-04得票数 16
回答已采纳
当使用EM单元指定字体大小时，我很难编写可维护的CSS代码，而不是PX单元。我已经习惯于编写这样的CSS代码：
body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}
这个想法是，在很多网页上，通过网站，有很多文本，应该有12个像素的字体大小。我利用特定的规则来覆盖站点特殊区域的12 in字体大小。
假设我将上面的代码重写为：
body {font-size: 12em;}
浏览 2提问于2012-04-03得票数 5
回答已采纳
2回答
我有一个设计好的网站，我对css，html，php很陌生，所以在css中，我使用了px中的所有大小。但是当我改变屏幕分辨率时，网页内容是不合适的，意思是：
当我放大这是结果，如何处理这在css？当我在谷歌上搜索相同的内容时，我发现我应该使用em / %，而不是使用px。
要用什么？
em
px
%
因为宽度和高度。
Edit1
在缩小后
浏览 2提问于2012-08-03得票数 2
回答已采纳
一个直接的css问题。假设我们有这样的样式：
body {
font-size : 16px;
}
p {
font-size : 0.875em; // relative to parent, 14px
line-height : 1em; //relative to this element, 14px
margin-bottom : 1em; //relative to this element, 14px
}
这意味着<p>s的字体大小为14px，行高为14px，页边距为14px。
我想要的是等同于：
body : {
fo
浏览 3提问于2012-11-23得票数 1
回答已采纳
我在引导v4.4.1 (package.json ->“@ng-引导/ng-引导”："^5.2.1“)中使用了角8。我的要求：
支持响应性设计(通过引导完成)
使浏览器一致地呈现所有元素
我认为第二点也是通过引导解决的。问题是：
<button type="button" class="btn btn-outline-dark menu-item">
<i class="fas fa-align-center"></i>
</button>
Chrome显示按钮的大
浏览 1提问于2020-02-20得票数 1
我在理解代码时遇到了一些严重问题：
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size:16px;
}
p {
margin: 0 0 1em 0;
font-size: 2em;
line-height: 1em;
}
</style>
</head>
<body>
<p>Sample Text</p>
</body>
</html>
我知道现在的字体大小是32 o
浏览 1提问于2018-06-11得票数 2
回答已采纳
4回答
我正在尝试找到一种方法来使我的排版具有响应性。我的代码将如下所示。每当我在dev tools中刷新时，这似乎并没有得到预期的结果。如何才能在手机、平板电脑和笔记本电脑/台式机上很好地显示文本？ @media only screen and (min-width: 320px)
{
html {line-height: 1.25em, font-size: 16px;}
h1{line-height: 1.25em, font-size:32px;}
h2{line-height: 1.15384em, font-size:26px;}
h3{line-
浏览 17提问于2016-09-07得票数 1
回答已采纳
好的，这很可能是基本的web开发101，但是有人能解释一下为什么这两个按钮的大小不一样吗？唯一的区别是，第一个按钮使用em单元，第二个按钮使用px。
(演示)
<button type="button" class="em">em</button>
<button type="button" class="px">px</button>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding:
浏览 22提问于2013-12-31得票数 2
回答已采纳
2回答
我正在阅读关于最佳字体大小和布局的sizing...and，我正在研究em而不是px。
据我所知，如果我这样做css；
html {
font-size: 16px;
}
body {
font-size: 1em;
}
它将强制浏览器设置为16px = 1em，这将使我能够通过计算所需像素/16来实现宽度和高度属性，对吗？
浏览 2提问于2012-08-31得票数 0
回答已采纳
3回答
我有一个<a>，里面有一些文本。我在a上设置了字体大小和行高，但文本突出在a的底部。
如何解决这个问题？
标记：
<a href="#" class="prev-link>Previous photo</a>
样式：
.prev-link {
display: inline-block;
margin: 0;
border-width: 0;
font-size: 18px;
line-height: 1em;
color: red;
background-color: #102c3b;
}
有什
浏览 1提问于2014-05-11得票数 0
我想知道我是否可以在同一个css文件中同时使用px和em (对于相同的标签/类)。我的意思是，我可以有这样的东西吗：
body{
font-size: 10px;
font-size: 0.625em;
font-weight: normal;
font-family: arial;
margin: 0px auto;
color: #333333;
background: #E0E0E0;}
我的目标是转换一个非常大的css文件，支持'em‘，以便用户可以决定他们想要使用的字体大小。但我的问题是'em‘的问题--嵌套标
浏览 2提问于2014-09-06得票数 4
我在我的<body>标签上设置了一个全局字体大小和行高，所以所有的默认正文副本都是14px和一个1.3em行高。 问题是，我的表具有较大的字体大小，它不是继承相对的行高，而是从<body>标记中获取计算值。因此，文本会重叠： 这是一个代码笔：https://codepen.io/thedigitalmc/pen/xxZJjyy <body>
<style type="text/css">
body {
font-size:13px;
line-height:1.3em
}
td {
font-size:30px
}
浏览 36提问于2020-07-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
