CSS 常用样式 之字体属性

  1. font-weight(字体粗细)

字体粗细用于设置文本的粗细程度,可以使用如下的值:

  • normal:正常字体(默认)
  • bold:加粗字体
  • bolder:更加加粗
  • lighter:更加细

代码实例如下:

css 复制代码
/* 设置字体加粗 */
font-weight: bold;

/* 设置字体更加加粗 */
font-weight: bolder;

/* 设置字体更加细 */
font-weight: lighter;
  1. font-style(字体风格)

字体风格用于设置文本的风格,可以使用如下的值:

  • normal:正常字体(默认)
  • italic:斜体字
  • oblique:倾斜字

代码实例如下:

css 复制代码
/* 设置斜体字 */
font-style: italic;

/* 设置倾斜字 */
font-style: oblique;
  1. line-height(行高)

行高用于设置文本行与行之间的距离,默认情况下,行高与文本大小相等。

代码实例如下:

css 复制代码
/* 设置行高 */
line-height: 1.5;

在此代码中,1.5 是一个乘数,它会将文本的行高设置为文本大小的 1.5 倍。

  1. 组合使用字体样式

可以将字体粗细、字体风格和字体大小等属性组合使用,如下所示:

css 复制代码
/* 设置字体样式 */
font: italic bold 20px/1.5 Arial, sans-serif;

在此代码中,字体样式包括斜体、加粗、20 像素大小、行高为文本大小的 1.5 倍、字体为 Arial 或 sans-serif。注意,这里将所有字体样式属性放在一个 font 属性中,以简化代码。

相关推荐
康小汪2 小时前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
前端·vue.js·人工智能·ai编程·最佳实践
智能运维指南3 小时前
研制过程“两张皮“怎么破:研制一体化支撑平台的定位、能力边界与落地前提
java·前端·人工智能·嘉为蓝鲸
白山编程大哥4 小时前
Java 后端如何优雅地把 List 集合返回给前端
java·前端·list
Flynt5 小时前
我把热榜那篇"禁用 axios"逐条实测了一遍:结论大体对,坑在它没讲的地方
前端·javascript·axios
Csvn6 小时前
bundle优化
前端
北冥有鱼6 小时前
发版后动态路由点击报 `Failed to fetch dynamically imported module`」问题上的完整排查与修复过程
前端·vue.js
静默回滚6 小时前
视频压到 25 MB 以内,码率要算、音轨要扣、余量要留
前端
用户37203749260186 小时前
把 10MB 中文语义模型塞进浏览器:STSB 做到教师模型的 93%,但线上 top1 只有 42%
前端
光锥智能6 小时前
海康机器人举行2026移动机器人新品发布会:箱式存拣升级,「明智」系列发布
java·前端·机器人
计算机魔术师6 小时前
Anthropic 上市文件最吓人的一幕,不是亏损 807 亿
前端