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(强制换行),避免长文本撑破简历容器
相关推荐
IT_陈寒22 分钟前
Vite打包时的静态资源坑,我帮你踩过了
前端·人工智能·后端
默_笙2 小时前
🔥 让 AI 帮我写完整个 Next.js 博客:框架就是 AI 的"上下文 buff"
前端·javascript
牧艺2 小时前
登录页还在用渐变?我一口气做了 5 个能摸的背景动效:吹蒲公英、滴墨染水、点熔岩闷裂
前端·canvas·交互设计
陆枫Larry2 小时前
状态机简介
前端
陆枫Larry3 小时前
一次登录问题排查:接口没错,错的是旧业务逻辑
前端
小小小小宇3 小时前
大模型打分与采样原理,以及 Pi Agent 核心原理
前端
一位正在转型AI全栈的前端工程师3 小时前
AI 全栈学习之旅 -Week 5:RAG 知识库问答系统:从零到生产级部署的全栈实践总结
前端·python
光影少年3 小时前
react navite 安卓iOS 打包、签名、环境区分
前端·react native·react.js
coderCN4 小时前
Nodejs 第三十四章 数据库(表达式和函数、子查询和连表)
前端·node.js
ssshooter4 小时前
AI 时代你不能不知道的 git worktree
前端·后端·面试