【前端】如何制作一个自己的网站(11)

接上文。

除了前面的颜色样式外,字体样式和文本样式也是网页设计中的重要组成部分。

合适的字体和文本排版,不仅可以使页面更加美观,也可以提升用户体验。接下来,我们先来看看CSS如何设置字体样式。

字体样式

|--------------------------------------------------------------------------------------------------------------------------------------------|
| 同时设置了字体样式的四个属性:字体类型、字体风格 、字体粗细和字体大小。 |
| <style> /* css设置字体样式 */ p { font-family: serif; font-style: italic; font-weight: bold; font-size: 30px; } </style> <p>网页开发基础</p> |
| |

字体类型

|----------------------------------------------------------------------------------------------------|
| font-family 属性,用于设置字体类型。 第4行,设置字体类型为serif,它是网页设计中最常用的++字体族++ 之一。还有一种常用的为sans-serif。 |
| <style> /* css设置字体类型 */ p { font-family: serif; } </style> <p>font-family属性,用于设置字体类型</p> |
| |

字体风格

|---------------------------------------------------------------------------------------------------|
| font-style属性,用于设置字体风格。 第4行,设置字体风格为italic,它表示字体以斜体显示。 |
| <style> /* css设置字体风格 */ p { font-style: italic; } </style> <p>font-style属性,用于设置字体风格</p> |
| |

字体大小

|----------------------------------------------------------------------------------------------------------------------------|
| font-size属性,用于设置字体的大小。 第4行,设置字体大小为30px,表示字体大小为30++像素++ 。 px表示像素,是常用的长度单位,像素值越大,字体就越大。 当涉及到和长度有关的属性值时,我们推荐使用像素px这种长度单位来表示。 |
| <style> /* css设置字体大小 */ p { font-size: 30px; } </style> <p>font-size属性,用于设置字体大小</p> |
| |

补充:

字体类型扩展

我们通常设置font-family 属性时,会使用几种字体名称作为一种"备选"机制。字体间以逗号隔开,如果浏览器不支持第一种字体,它将依次尝试下一种。并且,字体名称中包含空格时,则必须用引号包裹起来,例如"Times New Roman"

|------------------------------------------------------------------------------------|
| <style> /* css设置字体类型 */ p { font-family:"Times New Roman" ,serif; } </style> |
| |

代码具体说明:

font属性

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| font是字体的英文,所以font属性可以设置所有的字体样式。 通过font属性设置多个属性时,有严格的先后顺序。 牢记,字体大小和字体类型是必须设置的,并且字体类型放在最后。 这里,我们只设置font-size和font-family两个属性的值,其余属性会自动使用++默认值++ 。 |
| <style> /* 使用标签选择器,通过font属性设置p元素的字体样式 */ p { font: 30px serif; } </style> <p>font属性的用法</p> |
| |

补充:

这里一定需要注意,不同的属性值之间使用空格间隔。比如字体大小的值30px和字体类型的值serif中间有一个空格。

|------------------------------------------------------------------------------------------------------|
| <style> /* 使用标签选择器,通过font属性设置p元素的字体样式 */ p { font: 30px serif; } </style> <p>font属性的用法</p> |

总结:

相关推荐
lichenyang45321 分钟前
css模块化以及rem布局
前端·javascript·css
Chef_Chen27 分钟前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
棉花糖超人30 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
不学会Ⅳ34 分钟前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos
好开心啊没烦恼2 小时前
Python 数据分析:计算,分组统计1,df.groupby()。听故事学知识点怎么这么容易?
开发语言·python·数据挖掘·数据分析·pandas
lljss20203 小时前
Python11中创建虚拟环境、安装 TensorFlow
开发语言·python·tensorflow
Python×CATIA工业智造6 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜7 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄7 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122468 小时前
JAVA内存区域划分
java·开发语言·redis