【CSS】字体、行高、文本对齐

Ala_liu

已于 2022-06-08 11:19:09 修改

阅读量832

点赞数

文章标签： css 前端 css3

于 2022-06-08 11:13:22 首次发布

本文链接：https://blog.youkuaiyun.com/Ala_liu/article/details/125161209

版权

本文详细介绍了CSS中的字体设置，包括字体大小、字体族、图标字体的使用，如Font Awesome和阿里图标库。此外，还讨论了行高的概念以及如何通过line-height实现文字垂直居中。文本的水平对齐和垂直对齐也是重点，讲解了text-align和vertical-align属性的用法，帮助理解文本布局控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、字体

字体相关的样式
color
font-size
font-size相关单位
em相对于当前元素的font-size
rem相对于根元素的font-size

font-face可以直接将服务器中的字体提供给用户使用
问题：1.加载速度 2.版权 3.字体格式

@font-face{
   
/*指定字体的名字,自己起名与下文font-family不通*/
font-family:'xxx';
/*url服务器中字体的路径*/
/*format字体格式，非必要，可以不用写*/
src:url(..

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ala_liu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Python编程中设置行高的方法

DevRevolt的博客

10-01

565

本文介绍了两种常见的设置行高的方法：使用tkinter库和使用HTML标签。根据你的具体需求和所使用的工具，选择适合的方法来调整行高，并优化文本布局和外观。在Python编程中，我们可以使用不同的方法来设置行高。下面我将介绍两种常见的设置行高的方法，并附上相应的源代码示例。如果你正在使用Python的tkinter库创建GUI应用程序，你可以使用控件的属性来设置行高。如果你正在处理HTML文档或使用Python的Web开发框架（如Django或Flask）进行开发，你可以使用HTML标签来设置行高。

css+css之行高对齐以及缩进

weixin_44046450的博客

08-02

492

css+css之行高对齐以及缩进代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> p { line-height: 26px; /* 行间距 */ text-indent: 2em; /* 此时2em 就是2个汉字的宽度 */ } h3 { text-align: cen

参与评论您还未登录，请先登录后发表或查看评论

CSS 行高和对齐

weixin_34018169的博客

05-07

194

为什么80%的码农都做不了架构师？>>> ...

css 行高对齐文字缩进文字距离文字的透明文字阴影

weixin_44046450的博客

06-22

381

css 行高对齐文字缩进文字(英文)距离文字的透明文字阴影行高(line-height:??px)对齐:行高就是文字在一行中所占的高度,当设置文字所在的位置(盒子)的高度为50px,当我们不设置行高的时候,文字在一行中就显得不居中,那么怎么解决这个问题呢?我们只要将行高也设置为50px,那么文字就会根据行高来自动的居中。下面来演示一下，加行高和不加行高的效果。第一种不加行高的代码： &...

CSS——行高、字体、文本的样式

XinKun的博客

11-06

2641

一、行高行高(line height) 行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小（ex pm）也可以设置一个整数如果是一个整数行高将会是字体的指定的倍数默认行高是1.33 行高经常用来设置文字的行间距行间距等于行

HTML5&CSS3文本外观详解：颜色、行高、对齐与装饰

2. **行间距属性** (`line-height`) - 用于设置文本行之间的距离，也称为行高。常见的单位有像素(px)，相对值(em)和百分比(%)，其中像素px在实际应用中最为常见，通常建议行间距比字号大7.8像素左右。 3. **水平...

探索CSS文本对齐和行高设置

[探索CSS文本对齐和行高设置](https://img-blog.csdnimg.cn/b68dfdea751d403fa88513daffaa506f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz5bmz5peg5aWH5bCP56CB5YaccXdx,...

html css行高距离算法,CSS行高——line-height 行间距

weixin_29292431的博客

06-09

1302

初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线 DOCTYPE html>Testtitle>span{padding:...

CSS字体文本美化样式【超详细】

2302_77874940的博客

12-16

1939

从基本的字体属性设置，到更复杂的文本效果，如阴影、文字间距、行高等，我们都一一进行了讲解。vertical-align是一个CSS属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。text-align 是 HTML 中的一个属性，用于设置文本的水平对齐方式。x-offset参数：阴影水平偏移距离，单位可以是px、em、百分比。blur-radius参数：模糊距离，单位可以是px、em、百分比。可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容。y-offset参数：阴影垂直偏移距离。

【CSS】行高

最新发布

qq_39921135的博客

07-19

609

作用：设置多行文本的间距属性名：line-height属性值行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

css 行高

oldchao的博客

03-15

519

我们可以试想一下，为什么会要有行高。我现在不需要行高不是完全可以的嘛。我们可以仔细看看这个，这不是很正常的嘛。那我们来看看这个，那当我们第一次看到这个的时候你觉得是横着度，还是竖着读。合理的行高可以让我们阅读文章的时候更加的清晰。那我们回归主题，那什么是行高，其实可以把它理解为理解为所占据的高度。注意这里面的一行，而不是某一个元素的高度。也就是一行文本的基线到另一行文本的基线，这段距离就是行高。此时有一个注意的是我们此时给一个元素设置高度，那这一行的元素的高度就等于是这个行高。

CSS非布局样式字体、行高

Hello

02-19

286

非布局样式字体、字重、颜色、大小、行高背景、边框滚动、换行粗体、斜体、下划线其它字体族一堆字体 serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体 cursive 手写体 fantasy 花体多字体fallback 按照字体排列顺序逐个适配，直到有适配的。 <!DOCTYPE html> <html...

深入了解CSS字体度量，行高和vertical-align

王乐平技术博客

03-04

2709

本文英文出处:http: //iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align著作权归作者所有。转载自https: //www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.html line-height和vertical-align在

CSS：字体一边设置与字体等高的粗线//P标签是否有padding

qq_35628430的博客

08-05

385

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .cs { width: 200px; border: 1px solid gray; } ...

css字行高怎么设,css文本行高怎么设置-电脑自学网

weixin_39864571的博客

08-04

1571

css文本行高的设置方法：首先新建文件，使用div标签创建一行文字；然后编写样式，设置div标签的class属性为mybkkd；最后通过div标签的class属性mybkkd设置文字上下的行高。本教程操作环境：windows7系统、css3版，DELL G3电脑。css文本行高的设置方法：1、我们新建一个html网页文件，把他命名为test.html，接下来我们用test.html文件来讲解css...

php字体行高代码,css中font的简写方法(包括粗细、大小、行高、字体)

weixin_39957461的博客

04-13

494

字体粗细字体大小/行高字体样式。font: bold 12px/18px Arial, Helvetica, sans-serif ;1.字体属性主要包括下面几个font-family，font-style，font-variant，font-weight，font-size，fontfont-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;...

css 里的行高

weixin_33923762的博客

08-25

151

2019独角兽企业重金招聘Python工程师标准>>> ...

CSS基础：你必须要知道的行高属性 line-height

WangMin@汪末末

11-10

5267

CSS中的行高（line-height）是指网页中每行文字之间的距离，就是对于同一行内的不同内容，行高决定它们之间的间距。换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。合理设置文字行高不仅能够让网页更加美观与整洁，还能够增加用户的视觉与阅读体验，在大段文字中，合适的行高可以让用户阅读起来更加舒适。你可能还是不明白行高是什么？下面我通过几图来仔细给大家讲一下吧！

css实现两列布局高度同等高度

wabcainiao的博客

10-30

462

css实现两列布局高度同等高度