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(强制换行),避免长文本撑破简历容器
相关推荐
默_笙3 分钟前
🍉 我把《天龙八部》喂给了 AI,问它"段誉会什么武功?"答案让我惊呆了
前端·javascript
东风破_23 分钟前
React 自定义 Hook 实战:封装鼠标坐标与副作用清理
前端
bonechips24 分钟前
useRef + Web Worker:React 中的多线程计算
前端·javascript
Sterting25 分钟前
第 10 节:异步请求与 Axios —— 前端与后端
前端
Coder_Ke28 分钟前
源码没错,API 却“失踪”了:微信开发者工具的一次作用域背刺
前端
渣波32 分钟前
从“迷路”到“瞬移”:彻底搞懂 React Router 的 `useLocation` 与 `useNavigate`
前端·javascript
申君健248641827720233 分钟前
WebGPU 开发入门:从设备初始化到渲染一帧
前端
橘子星34 分钟前
React Context + 自定义 Hooks:告别 Props 地狱,一行代码跨层级传数据
前端·javascript
moMo34 分钟前
前端路由,其实就是三个对象在演戏
前端·react.js
用户29307509766935 分钟前
React 自定义 Hooks 实战:用 useMouse 理解响应式封装
前端