Web前端入门第 30 问：CSS 文本与字体样式常用属性

程序员菠萝

于 2025-03-17 19:56:03 发布

阅读量783

点赞数 20

文章标签：前端 css 科技计算机网络服务器 linux

本文链接：https://blog.csdn.net/xnxqwzy/article/details/146324196

版权

Web前端入门第 30 问：CSS 文本与字体样式常用属性

字体常用属性

font-family
定义字体类型（如： Arial, "Microsoft YaHei", sans-serif）。

特别说明，字体定义有优先级，比如：
```
1 font-family: Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
```
以上规则会优先命中 Inter 字体，如果电脑中找到此字体，则不会再往后查找；如果找不到，会继续找下一个字体 Helvetica Neue；如果定义的字体都找不到，则会使用系统默认字体。
font-size
设置字体大小（如： 16px、1.6em），em 单位是相对于父元素的字体大小，1.6em就是父元素的字体 1.6 倍。
font-weight
控制字体粗细（如： normal、bold、300，其中 bold 与 700 是等效的）。
font-style
设置斜体（如： italic、normal）。
font（简写属性）
组合多个属性（如： font: italic bold 16px/1.5 Arial），font 它可以揉进去这么多个属性，内部空间巨大：

文本常用属性

color
文本颜色（如： #333、rgba(0,0,0,0.5)）。
text-align
水平对齐方式（如： right 居右、center 居中、justify 两端对齐）。

注意看使用 justify 对齐的文本段落，左右两边与边框之间是不存在简写的，这就是两端对齐。
line-height
行高（如： 2 表示 2 倍字体大小的行高、24px 表示固定 24px 行高，如果字体大小超过 24px 则可能会文字重叠）。

红色圈出来的部分就表示文本的行高，表示一行文字占用空间。
text-decoration
文本装饰（如： underline 下划线、line-through 删除线、green wavy overline 绿色波浪上划线）。

除了图中演示部分，线条样式还支持 solid 实线、double 双实线、dotted 点划线、dashed 虚线。

下划线还可通过 text-underline-offset 控制下划线与文本之间的距离。
text-transform
大小写转换（如： uppercase 所有大写、lowercase 所有小写、 capitalize 首字母转换为大写）。
letter-spacing
字符间距（如： 10px、-5px 负数表示字符会叠在一起）。
word-spacing
单词间距（如： 0.5em），多用于英文排版，就表示两个单词之间的空格间距，如下：。
text-indent
首行缩进（如： 2em），文字段落首行的缩进距离，比如读书时痛苦的写作文时候要求首行要空两格，就是这个用处。
vertical-align
垂直对齐（如： top、middle、bottom，常用于行内元素），这属性完全可以展开细说，对齐方式有很多特别之处，不在此细说。
white-space
空白处理（如： nowrap 不换行，常用于显示省略号、pre 原样输出，常用于代码输出）。

正常文本显示时候，多个空白字符会被浏览器合并为一个（如：段落一），nowrap 强制文本不换行（段落二），pre 则会原样输出（段落三）。
text-overflow
溢出文本处理（如： ellipsis，需配合 overflow: hidden），如上图。
text-shadow
文本阴影（如： 2px 2px 4px rgba(0,0,0,0.5)）。
direction
文本方向（如： rtl 从右到左）。

其他相关属性

@font-face
自定义字体（引入外部字体文件），多用于英文自定义字体，毕竟英文就26个字母组合，而汉字却有上万多个，字体文件都以兆为单位计算，带宽受限，所以自定义字体就比较鸡肋了。
@font-face 出现后图标也常用自定义字体的方式引入，可参考 https://www.iconfont.cn/。
font-display
控制字体加载时的显示行为（如： swap、block），通常配合自定义字体使用。

使用方式如下：

1
2
3
4
5
6
7
8
9
10
11
12@font-face {
  font-family: ExampleFont;
  src: url(https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf) format('woff'),
      url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
.font1 {
  font-family: ExampleFont;
}

总结

本文介绍了 CSS 中常见的文本与字体使用方式，实际开发中，文本和字体属性常结合使用，例如：

1
2
3
4
5
6p {
  font: 16px/1.5 Arial;
  color: #333;
  text-align: justify;
  text-shadow: 1px 1px 2px #ccc;
}

最后

从时代发展的角度看，网络安全的知识是学不完的，而且以后要学的会更多，同学们要摆正心态，既然选择入门网络安全，就不能仅仅只是入门程度而已，能力越强机会才越多。

因为入门学习阶段知识点比较杂，所以我讲得比较笼统，大家如果有不懂的地方可以找我咨询，我保证知无不言言无不尽，需要相关资料也可以找我要，我的网盘里一大堆资料都在吃灰呢。

干货主要有：

①1000+CTF历届题库（主流和经典的应该都有了）

②CTF技术文档（最全中文版）

③项目源码（四五十个有趣且经典的练手项目及源码）

④ CTF大赛、web安全、渗透测试方面的视频（适合小白学习）

⑤ 网络安全学习路线图（告别不入流的学习）

⑥ CTF/渗透测试工具镜像文件大全

⑦ 2023密码学/隐身术/PWN技术手册大全

如果你对网络安全入门感兴趣，那么你需要的话可以点击这里👉网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！

扫码领取