CSS(四)CSS文本属性

CSS文本属性

1. 字体样式属性

属性 作用 语法与示例
font-family 设置字体族,可设置多个字体做兜底兼容 font-family: "微软雅黑", "宋体", sans-serif; 优先用第一个字体,不存在则依次向后匹配
font-size 设置字体字号 font-size: 16px; 简历正文常用14-16px,标题20-36px
font-weight 设置字体粗细 常用值:normal(正常,400)、bold(加粗,700),也可填100-900的数字
font-style 设置字体样式 常用值:normal(正常)、italic(斜体)
line-height 设置行高,控制行间距 常用值:1.8(无单位,相对于字号的倍数)、24px;简历正文推荐1.6-1.8倍行高,提升可读性
font 字体属性综合简写 语法:font: font-style font-weight font-size/line-height font-family; 必须保留font-sizefont-family,例:font: bold 16px/1.8 "微软雅黑";

补充:@font-face可定义服务器字体,语法:@font-face { font-family: 自定义字体名; src: url(字体文件路径); },可实现客户端未安装字体的显示效果。

2. 文本排版属性

属性 作用 简历应用场景
color 设置文本颜色 标题用深黑色#333,正文用深灰色#555,辅助信息用浅灰色#888,建立视觉层级
text-align 设置文本水平对齐方式 可选值:left(左对齐,正文默认)、center(居中,标题常用)、right(右对齐,日期/联系方式常用)、justify(两端对齐,大段正文常用)
text-indent 设置文本首行缩进 中文排版核心属性,简历自我评价段落常用text-indent: 2em;,实现首行缩进2个字符
text-decoration 设置文本装饰线 常用值:none(去掉a标签默认下划线)、underline(下划线)、line-through(删除线)
letter-spacing 设置字符间距 标题可适当增加字间距,提升高级感
text-shadow 设置文本阴影 语法:text-shadow: 水平偏移 垂直偏移 模糊距离 阴影颜色;,简历标题装饰、水印常用
white-space 设置空白符与换行处理 常用值:normal(默认换行)、nowrap(强制不换行)
text-overflow 设置文本溢出处理 常用值:clip(裁切)、ellipsis(溢出显示省略号),需配合overflow: hidden; white-space: nowrap;使用
word-wrap 设置长单词/URL换行 常用值:break-word(强制换行),避免长文本撑破简历容器
相关推荐
半个落月11 分钟前
别再死记变量提升了——从 V8 编译过程真正理解 JS 执行机制
前端
橘子星20 分钟前
别再懵圈!JS 执行机制的 “千层套路” 全揭秘
前端·javascript
GuWenyue20 分钟前
LeetCode 76 最小覆盖子串|JS 滑动窗口标准解法
前端·算法·面试
YHHLAI22 分钟前
前端 HTTP 请求 & LLM 接口开发
前端·网络协议·http
拾年27524 分钟前
__proto__ vs prototype:90% 的人分不清的 JavaScript 核心
前端·javascript·面试
国科安芯25 分钟前
国科安芯推出商业航天级抗辐照半双工 RS485 收发器 ASC485S2Y
前端·单片机·嵌入式硬件·架构·安全性测试
丑过三八线25 分钟前
Umi 运行时配置 app.tsx 详解
前端
提子拌饭13341 分钟前
个人月事记录表应用 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙系统
YHL1 小时前
📚 JS执行机制(执行上下文 + 调用栈 + 编译流程)
前端·javascript
不简说1 小时前
这次真香!sv-print 可视化打印设计器更新:插件脚手架、Excel 导出、弹窗 API 三连发
前端·javascript·前端框架