【前端】如何制作一个自己的网站（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>

总结：