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(强制换行),避免长文本撑破简历容器
相关推荐
MXN_小南学前端2 小时前
watch详解:与computed 对比以及 Vue2 / Vue3 区别
前端·javascript·vue.js
饭小猿人2 小时前
Flutter实现底部动画弹窗有两种方式
开发语言·前端·flutter
让学习成为一种生活方式2 小时前
pbtk v 3.5.0安装与使用--生信工具084
前端·chrome
heimeiyingwang2 小时前
【架构实战】FinOps云成本优化实践
前端·chrome·架构
Mr Xu_3 小时前
从后端数据到前端图表:深入解析 reduce 与 flatMap 的数据整形实战
前端·javascript
玖玖passion3 小时前
Windows 上部署 Hermes Agent 完整指南 - 让你的 AI 助手在 WSL2 中跑起来
前端·后端·github
AC赳赳老秦4 小时前
OpenClaw多平台部署:Windows+Linux跨系统协同,实现全场景覆盖
linux·服务器·前端·网络·windows·deepseek·openclaw
喜欢吃鱿鱼4 小时前
DES加解密(附带解决转义问题)-VUE
开发语言·前端·javascript