使用 CSS 的 line-height 属性来提高可读性

news/2024/4/19 14:37:01/文章来源:https://blog.csdn.net/rubys007/article/details/136487007

在本文中,您将了解 CSS line-height 属性以及如何使用它来创建视觉上愉悦、易读的文本。

您可能以前见过 line-height 的使用:

p {font-size: 16px;line-height: 1.2;
}

但它是如何工作的,以及在 CSS 中扮演着什么角色呢?

CSS 中的排版根源

CSS 中的许多概念都源自排版学科。一个例子就是 CSS 的 line-height 属性,它设置了换行文本两个基线之间的距离。

“基线”是文本所在的虚拟线。

!基线演示

例如,如果我们在 <div> 标签中有这样一小段文本:

<div>The alligator went for a swim in the deep lagoon.
</div>

如果您调整浏览器窗口大小,使文本换行到下一行,您将会看到两个基线和一个行高(用黄色箭头表示):

!行高演示

CSS line-height 属性的较大值将扩大这个距离,而较小的值将缩小它。


行高与文本可读性

line-height 属性在使文本对用户可读方面起着核心作用。当您将 line-height 设置得太小时,文本会显得拥挤。长时间阅读这样的文本会让用户感到疲惫:

!小行高

如果它太大,用户将难以产生对所阅读内容的兴趣:

!行高大小

但是当您找到合适的 line-height 时,您的文本将会感到宽敞和和谐 💮🌺🌸

!良好的行高示例

找到合适的 line-height 将根据您的需求而变化,但它也取决于您使用的字体系列。这是因为每种字体都有自己的个性,并且在大块文本中会有不同的“阅读”效果。

例如,Helvetica 和 Times New Roman 即使它们的 font-size 相同,也需要不同的 line-height 间距。

line-height 的语法

您可以使用各种值来设置 line-height!它与其他 CSS 属性非常不同,因为它可以接受典型的 px% 值,但它还有自己独特的“无单位”值:

/* 使用浏览器默认值。通常为所有主要浏览器的 "1.2" */
line-height: normal;/* 无单位值(只有 line-height 可以这样做!) */
line-height: 1.2;/* <length> 值,如 px、rem、em、pt */
line-height: 3em;/* <percentage> 值 */
line-height: 120%;

行高由黄色箭头表示。

!行高演示

浏览器如何计算 line-height

如果您使用百分比或“无单位”值,字体大小将被计入结果的 line-height。例如,以下两个代码片段都将由浏览器计算为 19.2px

.myText {font-size: 16px;line-height: 1.2  /* (19.2px = 16 x 1.2) */
}
.myText {font-size: 16px;line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

然而,如果您使用像 px|em|rem|pt 这样的“长度”值,font-size 将不会用于计算 line-height

.myText {font-size: 16px;line-height: 20px;  /* 总是 20px! */
}

结论

一般来说,对于大多数字体来说,良好的 line-height 范围在 1.5 到 1.7 之间。例如,Alligator.io 使用的行高为 1.6。这更多地是一门艺术而不是科学,很多时候您会发现自己打开浏览器的“开发者工具”,微调 line-height 直到感觉“刚刚好” ✨👌

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_998001.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch:机器学习与人工智能 - 理解差异

作者&#xff1a;来自 Elastic Aditya Tripathi, Jessica Taylor 长期以来&#xff0c;人工智能几乎完全是科幻小说作家的玩物&#xff0c;人类将技术推得太远&#xff0c;以至于它变得活跃起来 —— 正如好莱坞让我们相信的那样 —— 开始造成严重破坏。 令人愉快的东西&#…

[机器视觉]halcon十二 条码识别、字符识别之字符识别

[机器视觉]halcon十二 条码识别、字符识别之字符识别 流程 获取图像-》创建模型-》查找文本-》清除模型 效果 算子 create_text_model_reader &#xff1a; 创建文本模型 find_text : 查找文本 get_text_result &#xff1a;获取文本内容 set_text_model_param : 设置文本模板…

5G与智慧文旅的融合发展:推动旅游业转型升级与可持续发展

随着5G技术的飞速发展和广泛应用&#xff0c;其与智慧文旅的融合发展正成为推动旅游业转型升级与可持续发展的重要力量。5G技术以其高速率、低时延、大连接的特性&#xff0c;为智慧文旅注入了新的活力&#xff0c;助力旅游业实现更高效、更智能、更绿色的发展。本文将深入探讨…

大白话说---“消息队列”

目录 一、什么是消息队列&#xff1f; 二、消息队列的作用 1.解耦 2.削峰 3.异步 三、消息队列的使用场景 1.传统设计 2.加入消息队列后的优化 四、常见的消息队列 一、什么是消息队列&#xff1f; 从名称上&#xff0c;我们就可以得到两个关键信息&#xff0c;即“消息”和…

去电脑维修店修电脑需要注意什么呢?装机之家晓龙

每当电脑出现故障时&#xff0c;你无疑会感到非常沮丧。 如果计算机已过了保修期&#xff0c;您将无法享受制造商的免费保修服务。 这意味着您必须自费找到一家电脑维修店。 去电脑维修店并不容易。 大家一定要知道&#xff0c;电脑维修非常困难&#xff0c;尤其是笔记本电脑维…

ElasticSearch之通过search after和scroll解决深度分页问题

写在前面 通过from&#xff0c;size来进行分页查询时&#xff0c;如下&#xff1a; 当from比较大时会有深度分页问题&#xff0c;问题产生的核心是coordinate node需要从每个分片中获取fromsize条数据&#xff0c;当from比较大&#xff0c;整体需要获取的数据量也会比较大&am…

C语言第三十六弹---文件操作(中)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 文件操作 1、文件的顺序读写 1.1、顺序读写函数介绍 1.1.1、fgetc 与 fputc 1.1.2、fgets 与 fputs 1.1.3、fscanf 与 fprintf 1.1.4、fread 与 fwrite 1.…

人工智能(AI)与电网系统的结合

人工智能&#xff08;AI&#xff09;与电网系统的结合可以带来许多潜在的好处&#xff0c;包括提高电网的运行效率、安全性和可靠性。以下是一些主要的应用领域&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交…

DevStack 基于 Ubuntu 部署 OpenStack

Devstack 简介 DevStack 是一系列可扩展的脚本&#xff0c;用于基于 git master 的最新版本快速调出完整的 OpenStack 环境。devstack 以交互方式用作开发环境和 OpenStack 项目大部分功能测试的基础。 devstack 透过执行 stack.sh 脚本&#xff0c;搭建 openstack 环境&…

Guitar Pro 8.1中文版永久许可证激活2024最新24位注册激活码生成器

Guitar Pro是一款非常受欢迎的音乐制作软件&#xff0c;它可以帮助用户创建和编辑各种音乐曲谱。从其诞生以来就送专门为了编写吉他谱而研发迭代的。 尽管这款产品可能已经成为全球最受欢迎的吉他打谱软件&#xff0c;在编写吉他六线谱和乐队总谱中始终处于行业领先地位&#…

“色狼”用英语怎么说?柯桥日常英语,成人英语口语学习

最近有粉丝问我"色狼"英文翻译是啥 首先声明不是"colour wolf"哈 关于“色狼”的英文表达有很多 快和C姐一起来看看吧&#xff01; 1.pervert 这个单词的意思是变态、色狼 是对性变态者最直观的描述 He is such a pervert&#xff01; I saw him lo…

VMware 集群-虚拟机配置反亲和性(互斥)

简介 博客&#xff1a;https://songxwn.com/ 为实现应用系统的冗余&#xff0c;经常会双机或者多机部署&#xff08;如数据库集群等&#xff09;。在VMware 集群里面&#xff0c;要保证不同应用集群的节点虚拟机在不同的物理宿主机上&#xff0c;防止单个宿主机故障&#xff…

数据结构之单链表详解(C语言手撕)

​ &#x1f389;个人名片&#xff1a;&#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN…

【开源】SpringBoot框架开发数据可视化的智慧河南大屏

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 数据模块 A4.2 数据模块 B4.3 数据模块 C4.4 数据模块 D4.5 数据模块 E 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的数据可视化的智慧河南大屏&#xff0c;包含了GDP、…

连接kafka报错:java.io.IOException: Can‘t resolve address:

修改电脑host文件:C:\Windows\System32\drivers\etc\hosts 加上一行 192.168.1.XXX MHA_SLAVE2&#xff08;192.168.1.XXX 这个是安装kafka 的服务器地址&#xff0c;MHA_SLAVE2是kafka的容器id&#xff09;

【数据结构与算法】二分查找题解(二)

这里写目录标题 一、81. 搜索旋转排序数组 II二、167. 两数之和 II - 输入有序数组三、441. 排列硬币四、374. 猜数字大小五、367. 有效的完全平方数六、69. x 的平方根 一、81. 搜索旋转排序数组 II 中等 已知存在一个按非降序排列的整数数组 nums &#xff0c;数组中的值不必…

c++ 二分查找(迭代与递归)

二分搜索被定义为一种在排序数组中使用的搜索算法&#xff0c;通过重复将搜索间隔一分为二。二分查找的思想是利用数组已排序的信息&#xff0c;将时间复杂度降低到O(log N)。 二分查找算法示例 何时在数据结构中应用二分查找的条件&#xff1a; 应用二分查找算法&#xff1a;…

(C语言)sizeof和strlen的对比(详解)

sizeof和strlen的对⽐&#xff08;详解&#xff09; 1. sizeof sizeof是用来计算变量所占内存空间大小的&#xff0c; 单位是字节&#xff0c;如果操作数是类型的话&#xff0c;计算的是用类型创建的变量所占空间的大小。 sizeof 只关注占用内存空间的大小 &#xff0c;不在乎内…

Rust结构体讲解学习,以及impl结构体方法和结构体关联函数

Rust 中的结构体&#xff08;Struct&#xff09;与元组&#xff08;Tuple&#xff09;都可以将若干个类型不一定相同的数据捆绑在一起形成整体&#xff0c;但结构体的每个成员和其本身都有一个名字&#xff0c;这样访问它成员的时候就不用记住下标了。元组常用于非定义的多值传…

表单提交 滚动到必填校验位置

handleCommit(flag) {this.$refs["form"].validate((valid, object) > {if (valid) {this.form.checkState flag;this.form.checkLevel 1;this.form.type 1; //规划this.form.filingsId this.form.id;checkFilings(this.form).then((response) > {this.$mo…