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 属性中,以简化代码。

相关推荐
疯狂的沙粒10 分钟前
Vue 前端大屏做多端屏幕适配时,如何让其自动适配多种不同尺寸的屏幕?
前端·javascript·vue.js
范小多14 分钟前
24小时学会Python Visual code +Python Playwright通过谷歌浏览器取控件元素(连载、十一)
服务器·前端·python
ooolmf15 分钟前
matlab2024读取温度01
java·前端·javascript
打工人小夏16 分钟前
前端vue3项目使用nprogress动画组件,实现页面加载动画
前端
一颗宁檬不酸18 分钟前
前端农业商城中产品产地溯源功能的实现
前端
李少兄25 分钟前
深入理解前端中的透视(Perspective)
前端·css
江公望35 分钟前
HTML5 History 模式 5分钟讲清楚
前端·html·html5
云和数据.ChenGuang41 分钟前
Zabbix Web 界面安装时**无法自动创建配置文件 `zabbix.conf.php`** 的问题
前端·zabbix·运维技术·数据库运维工程师·运维教程
码界奇点44 分钟前
Java Web学习 第15篇jQuery万字长文详解从入门到实战解锁前端交互新境界
java·前端·学习·jquery
A24207349301 小时前
使用jQuery动态操作HTML和CSS
css·html·jquery