↩ zhcn 编程语言 Web相关 JSON 非公開: CSS 字体样式（字体）

CSS 字体样式（字体）

除了上面介绍的背景之外，字体设置也是网页设计的重要组成部分，合适的字体不仅能让页面更加美观，还能提高用户体验。 CSS 提供了一组用于设置文本字体样式的属性，包括更改字体以及控制字体的大小和粗细。

font-family：设置字体。
font-style：设置字体样式，如斜体或斜体。
font-weight：设置字体粗细。
字体大小：设置字体大小。
font-variant：将小写字母转换为小写。
font-stretch：拉伸和变换字体（很少使用，主流浏览器不支持）。
font：字体属性的缩写，允许您在一条语句中设置多个字体属性。

1. 字体家族

font-family 属性用于设置元素内文本的字体。字体有数千种，其中一些不是免费的，因此几乎不可能将它们全部安装在您的计算机上。为了确保配置的字体正确显示，您可以使用 font-family 属性定义多个字体名称的列表，字体名称之间用逗号分隔,浏览器将首先选择列表中的第一个。不支持，请尝试以下操作：

font-family 属性的可能值为：

价值	解释
姓，通用家族	家族名称：字体名称。字体名称代表字体。例如“微软雅黑”就是一种字体。 generic-family：字体系列，即特定类型字体的组合。字体系列代表一种包含许多相似但不同字体的字体类型。例如，“sans-serif”是一种无衬线字体。类似的字体。字体的默认值取决于浏览器设置
继承	从父元素继承字体设置

下表列出了一些常用的字体系列（通用系列）。

字体系列	阐明	字体
衬线	它有衬线字体。即在文本笔划的末尾添加特殊的装饰线或衬线。	“Lucida Bright”、“Lucida Fax”、Palatino、“Palatino Linotype”、Palladio、“URW Palladio”、衬线
无衬线字体	无衬线字体，文本笔划末端平滑	“Open Sans”、“Fira Sans”、“Lucida Sans”、“Lucida Sans Unicode”、“Trebuchet MS”、“Liberation Sans”、“Nimbus Sans L”、无衬线字体
等宽字体	等宽字体，即每个文本的宽度相同	“Fira Mono”、“DejaVu Sans Mono”、Menlo、Consolas、“Liberation Mono”、Monaco、“Lucida Console”、等宽字体
草书	草书字体。这种字体具有连续的笔划或特殊的斜体效果，给人一种手写的感觉。	“Brush Script MT”、“Brush Script Std”、“Lucida Calligraphy”、“Lucida Handwriting”、“Apple Chancery”、草书
幻想	具有特殊艺术效果的字体	纸莎草纸、赫库兰努姆、“Party LET”、“Curlz MT”、Harrington、奇幻

[示例] 使用 font-family 属性设置 HTML 元素的字体样式。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
        body {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
        }
    </style>
</head>
<body>
    <h1>font-family属性</h1>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_513”对齐=“aligncenter”宽度=“1024”]

图：font-family属性演示[/caption]

注意：如果字体系列或字体名称包含空格或多个单词，则根据元素的样式属性要求使用引号，例如“Times New Roman”、“Courier New”、“Segoe UI”等必须括起来。使用单引号。

网页设计中最常用的字体系列是衬线字体和无衬线字体，因为它们更易于阅读。在显示某些程序代码时，通常会使用等宽字体，这样可以使程序代码显得更干净。

2. 字体样式

font-style属性用于设置字体样式，如斜体、斜体等。该属性的可选值为：

价值	解释
普通的	默认情况下，文本以普通字体显示
斜体	斜体文本
斜	斜体文本
继承	从父元素继承字体样式

[示例] 使用font-style属性设置字体样式。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
        body {
            font-style: oblique;
        }
        .normal {
            font-style: normal;
        }
        .italic {
            font-style: italic;
        }
        .oblique {
            font-style: oblique;
        }
        .inherit {
            font-style: inherit;
        }
    </style>
</head>
<body>
    <p class="normal">normal：標準フォントを表示する</p>
    <p class="italic">italic：イタリック体のフォントを表示する</p>
    <p class="oblique">oblique：斜めになったフォントを表示する</p>
    <p class="inherit">inherit：親要素からフォントスタイルを継承する</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_514”对齐=“aligncenter”宽度=“1024”]

图：font-style属性演示[/caption]

乍一看，您可能会认为斜体和斜体具有相同的效果。事实上，斜体显示字体的斜体版本，而斜体是带有倾斜的常规字体。

3. 字体粗细

font-weight 属性允许您设置字体粗细并具有以下可选值：

价值	解释
普通的	默认、标准字体
大胆的	粗体字体
更大胆	粗体字体
打火机	细字体
100、200、300、400、500、600、700、800、900	将字体粗细设置为从细到粗。 100 等于最细字体，400 等于普通字体，700 等于粗体。
继承	从父元素继承字体粗细

[示例] 使用 font-weight 属性设置字体粗细。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
    p.weight-100 {
        font-weight: 100;
    }
    p.weight-200 {
        font-weight: 200;
    }
    p.normal {
        font-weight: normal;
    }
    p.bold {
        font-weight: bold;
    }
    p.bolder {
        font-weight: bolder;
    }
    </style>
</head>
<body>
    <p class="weight-100">font-weight: 100;</p>
    <p class="weight-200">font-weight: 200;</p>
    <p class="normal">font-weight: normal;</p>
    <p class="bold">font-weight: bold;</p>
    <p class="bolder">font-weight: bolder;</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_515”对齐=“aligncenter”宽度=“991”]

图：font-weight属性演示[/caption]

4.字体大小

font-size属性用于设置字体的大小（font size），有以下可选值：

价值	解释
xx-小、x-小、小、中、大、x-大、xx-大	以关键字的形式将字体设置为不同的大小，从xx-small到xx-large。默认值为中等。
较小	设置字体大小小于父元素
更大	设置字体大小大于父元素
长度	将字体设置为固定大小的数值和单位格式，如18px、2em等。
%	将字体大小设置为相对于父元素字体的百分比。
继承	从父元素继承字体大小

[示例] 使用font-size属性设置字体大小。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSのフォント</title>
    <style>
        .xx_small {
            font-size: xx-small;
        }
        .x_small {
            font-size: x-small;
        }
        .small {
            font-size: x-small;
        }
        .medium {
            font-size: x-small;
        }
        .large {
            font-size: large;
        }
        .x-large {
            font-size: x-large;
        }
        .xx-large {
            font-size: xx-large;
        }
        .smaller {
            font-size: smaller;
        }
        .larger {
            font-size: larger;
        }
        .font-20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="xx_small">フォントサイズ : xx-small</p>
    <p class="x_small">フォントサイズ : x-small</p>
    <p class="small">フォントサイズ : x-small</p>
    <p class="medium">フォントサイズ : medium</p>  
    <p class="large">フォントサイズ : large</p>   
    <p class="x-large">フォントサイズ : x-large</p>   
    <p class="xx-large">フォントサイズ : xx-large</p>   
    <p class="smaller">フォントサイズ :smaller</p>   
    <p class="larger">フォントサイズ :larger</p>
    <p class="font-20">フォントサイズ :20ピクセル</p> 
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_516”对齐=“aligncenter”宽度=“1024”]

图：font-size属性演示[/caption]

5. 字体变体

font-variant 属性可以将文本中的小写字母转换为小型大写字母（称为小型大写字母，因为转换后的大写字母与原始小写字母的大小相同）。 font-variant 属性的可选值为：

价值	解释
小的	默认情况下，浏览器显示标准字体
小盘股	将文本中的小写字母转换为小型大写字母
继承	从父元素继承 font-variant 属性的值

[示例] 使用 font-variant 属性设置小型大写字母：

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
        .normal {
            font-variant: normal
        }

        .small {
            font-variant: small-caps
        }
    </style>
</head>
<body>
    <p class="normal">これは段落です</p>
    <p class="small">これは段落です</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_517”对齐=“aligncenter”宽度=“664”]

图：font-variant属性演示[/caption]

字体属性的功能与上面描述的背景属性类似，字体属性允许您同时设置多个字体属性，不同之处在于字体属性的使用必须遵循以下顺序：

字体：[[字体样式||字体变体||字体粗细||字体拉伸]？字体大小[/行高]？字体系列] | 标题| 消息框|标题 | 状态栏

使用 font 属性时，请注意以下事项：

字体属性必须按照上面列出的顺序使用，并且不能忽略 font-size 和 font-family 属性。
除 font-size 和 font-family 属性外，font 属性的每个参数只允许有一个值。忽略的属性将设置为其默认值。
要定义 line-height 属性，必须用斜杠/分隔 font-size 和 line-height 属性。

【示例】使用font属性同时定义多种字体效果：

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
    p.info {
        font: italic bold 12px/30px arial, sans-serif;
    }
    </style>
</head>
<body>
    <p>font属性の使用には、以下の順序に従う必要があります：</p>
    <p class="info">font：[[font-style || font-variant || font-weight || font-stretch]? font-size [ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_518”对齐=“aligncenter”宽度=“1024”]

图：字体属性演示[/caption]

JSON

除了上面介绍的背景之外，字体设置也是网页设计的重要组成部分，合适的字体不仅能让页面更加美观，还能提高用户体验。 CSS 提供了一组用于设置文本字体样式的属性，包括更改字体以及控制字体的大小和粗细。

font-family：设置字体。
font-style：设置字体样式，如斜体或斜体。
font-weight：设置字体粗细。
字体大小：设置字体大小。
font-variant：将小写字母转换为小写。
font-stretch：拉伸和变换字体（很少使用，主流浏览器不支持）。
font：字体属性的缩写，允许您在一条语句中设置多个字体属性。

1. 字体家族

font-family 属性用于设置元素内文本的字体。字体有数千种，其中一些不是免费的，因此几乎不可能将它们全部安装在您的计算机上。为了确保配置的字体正确显示，您可以使用 font-family 属性定义多个字体名称的列表，字体名称之间用逗号分隔,浏览器将首先选择列表中的第一个。不支持，请尝试以下操作：

font-family 属性的可能值为：

价值	解释
姓，通用家族	家族名称：字体名称。字体名称代表字体。例如“微软雅黑”就是一种字体。 generic-family：字体系列，即特定类型字体的组合。字体系列代表一种包含许多相似但不同字体的字体类型。例如，“sans-serif”是一种无衬线字体。类似的字体。字体的默认值取决于浏览器设置
继承	从父元素继承字体设置

下表列出了一些常用的字体系列（通用系列）。

字体系列	阐明	字体
衬线	它有衬线字体。即在文本笔划的末尾添加特殊的装饰线或衬线。	“Lucida Bright”、“Lucida Fax”、Palatino、“Palatino Linotype”、Palladio、“URW Palladio”、衬线
无衬线字体	无衬线字体，文本笔划末端平滑	“Open Sans”、“Fira Sans”、“Lucida Sans”、“Lucida Sans Unicode”、“Trebuchet MS”、“Liberation Sans”、“Nimbus Sans L”、无衬线字体
等宽字体	等宽字体，即每个文本的宽度相同	“Fira Mono”、“DejaVu Sans Mono”、Menlo、Consolas、“Liberation Mono”、Monaco、“Lucida Console”、等宽字体
草书	草书字体。这种字体具有连续的笔划或特殊的斜体效果，给人一种手写的感觉。	“Brush Script MT”、“Brush Script Std”、“Lucida Calligraphy”、“Lucida Handwriting”、“Apple Chancery”、草书
幻想	具有特殊艺术效果的字体	纸莎草纸、赫库兰努姆、“Party LET”、“Curlz MT”、Harrington、奇幻

[示例] 使用 font-family 属性设置 HTML 元素的字体样式。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
        body {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
        }
    </style>
</head>
<body>
    <h1>font-family属性</h1>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_513”对齐=“aligncenter”宽度=“1024”]

图：font-family属性演示[/caption]

注意：如果字体系列或字体名称包含空格或多个单词，则根据元素的样式属性要求使用引号，例如“Times New Roman”、“Courier New”、“Segoe UI”等必须括起来。使用单引号。

网页设计中最常用的字体系列是衬线字体和无衬线字体，因为它们更易于阅读。在显示某些程序代码时，通常会使用等宽字体，这样可以使程序代码显得更干净。

2. 字体样式

font-style属性用于设置字体样式，如斜体、斜体等。该属性的可选值为：

价值	解释
普通的	默认情况下，文本以普通字体显示
斜体	斜体文本
斜	斜体文本
继承	从父元素继承字体样式

[示例] 使用font-style属性设置字体样式。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
        body {
            font-style: oblique;
        }
        .normal {
            font-style: normal;
        }
        .italic {
            font-style: italic;
        }
        .oblique {
            font-style: oblique;
        }
        .inherit {
            font-style: inherit;
        }
    </style>
</head>
<body>
    <p class="normal">normal：標準フォントを表示する</p>
    <p class="italic">italic：イタリック体のフォントを表示する</p>
    <p class="oblique">oblique：斜めになったフォントを表示する</p>
    <p class="inherit">inherit：親要素からフォントスタイルを継承する</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_514”对齐=“aligncenter”宽度=“1024”]

图：font-style属性演示[/caption]

乍一看，您可能会认为斜体和斜体具有相同的效果。事实上，斜体显示字体的斜体版本，而斜体是带有倾斜的常规字体。

3. 字体粗细

font-weight 属性允许您设置字体粗细并具有以下可选值：

价值	解释
普通的	默认、标准字体
大胆的	粗体字体
更大胆	粗体字体
打火机	细字体
100、200、300、400、500、600、700、800、900	将字体粗细设置为从细到粗。 100 等于最细字体，400 等于普通字体，700 等于粗体。
继承	从父元素继承字体粗细

[示例] 使用 font-weight 属性设置字体粗细。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
    p.weight-100 {
        font-weight: 100;
    }
    p.weight-200 {
        font-weight: 200;
    }
    p.normal {
        font-weight: normal;
    }
    p.bold {
        font-weight: bold;
    }
    p.bolder {
        font-weight: bolder;
    }
    </style>
</head>
<body>
    <p class="weight-100">font-weight: 100;</p>
    <p class="weight-200">font-weight: 200;</p>
    <p class="normal">font-weight: normal;</p>
    <p class="bold">font-weight: bold;</p>
    <p class="bolder">font-weight: bolder;</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_515”对齐=“aligncenter”宽度=“991”]

图：font-weight属性演示[/caption]

4.字体大小

font-size属性用于设置字体的大小（font size），有以下可选值：

价值	解释
xx-小、x-小、小、中、大、x-大、xx-大	以关键字的形式将字体设置为不同的大小，从xx-small到xx-large。默认值为中等。
较小	设置字体大小小于父元素
更大	设置字体大小大于父元素
长度	将字体设置为固定大小的数值和单位格式，如18px、2em等。
%	将字体大小设置为相对于父元素字体的百分比。
继承	从父元素继承字体大小

[示例] 使用font-size属性设置字体大小。

 <!DOCTYPE html>
<html>
<head>
    <title>CSSのフォント</title>
    <style>
        .xx_small {
            font-size: xx-small;
        }
        .x_small {
            font-size: x-small;
        }
        .small {
            font-size: x-small;
        }
        .medium {
            font-size: x-small;
        }
        .large {
            font-size: large;
        }
        .x-large {
            font-size: x-large;
        }
        .xx-large {
            font-size: xx-large;
        }
        .smaller {
            font-size: smaller;
        }
        .larger {
            font-size: larger;
        }
        .font-20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="xx_small">フォントサイズ : xx-small</p>
    <p class="x_small">フォントサイズ : x-small</p>
    <p class="small">フォントサイズ : x-small</p>
    <p class="medium">フォントサイズ : medium</p>  
    <p class="large">フォントサイズ : large</p>   
    <p class="x-large">フォントサイズ : x-large</p>   
    <p class="xx-large">フォントサイズ : xx-large</p>   
    <p class="smaller">フォントサイズ :smaller</p>   
    <p class="larger">フォントサイズ :larger</p>
    <p class="font-20">フォントサイズ :20ピクセル</p> 
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_516”对齐=“aligncenter”宽度=“1024”]

图：font-size属性演示[/caption]

5. 字体变体

font-variant 属性可以将文本中的小写字母转换为小型大写字母（称为小型大写字母，因为转换后的大写字母与原始小写字母的大小相同）。 font-variant 属性的可选值为：

价值	解释
小的	默认情况下，浏览器显示标准字体
小盘股	将文本中的小写字母转换为小型大写字母
继承	从父元素继承 font-variant 属性的值

[示例] 使用 font-variant 属性设置小型大写字母：

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
        .normal {
            font-variant: normal
        }

        .small {
            font-variant: small-caps
        }
    </style>
</head>
<body>
    <p class="normal">これは段落です</p>
    <p class="small">これは段落です</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_517”对齐=“aligncenter”宽度=“664”]

图：font-variant属性演示[/caption]

字体属性的功能与上面描述的背景属性类似，字体属性允许您同时设置多个字体属性，不同之处在于字体属性的使用必须遵循以下顺序：

字体：[[字体样式||字体变体||字体粗细||字体拉伸]？字体大小[/行高]？字体系列] | 标题| 消息框|标题 | 状态栏

使用 font 属性时，请注意以下事项：

字体属性必须按照上面列出的顺序使用，并且不能忽略 font-size 和 font-family 属性。
除 font-size 和 font-family 属性外，font 属性的每个参数只允许有一个值。忽略的属性将设置为其默认值。
要定义 line-height 属性，必须用斜杠/分隔 font-size 和 line-height 属性。

【示例】使用font属性同时定义多种字体效果：

 <!DOCTYPE html>
<html>
<head>
    <title>CSSフォント</title>
    <style>
    p.info {
        font: italic bold 12px/30px arial, sans-serif;
    }
    </style>
</head>
<body>
    <p>font属性の使用には、以下の順序に従う必要があります：</p>
    <p class="info">font：[[font-style || font-variant || font-weight || font-stretch]? font-size [ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_518”对齐=“aligncenter”宽度=“1024”]

图：字体属性演示[/caption]

JSON