CSS 字体

2025 年 3 月 26 日 | 阅读 5 分钟

CSS Font 属性用于控制文本的外观。通过使用 CSS Font 属性，您可以更改文本的大小、颜色、样式等。您已经学习了如何使文本加粗或带下划线。在这里，您还将了解如何使用百分比调整字体大小。

以下是一些重要的字体属性

CSS 字体颜色：此属性用于更改文本的颜色。（独立属性）
CSS 字体系列：此属性用于更改字体的样式。
CSS 字体大小：此属性用于增加或减小字体的大小。
CSS 字体样式：此属性用于使字体变为粗体、斜体或倾斜。
CSS 字体变体：此属性创建小型大写字母效果。
CSS 字体粗细：此属性用于增加或减小字体的粗细和亮度。

1) CSS 字体颜色

CSS 字体颜色是 CSS 中的一个独立属性，尽管它似乎是 CSS 字体的一部分。它用于更改文本的颜色。

有三种不同的格式可以定义颜色

按颜色名称
按十六进制值
按 RGB

在上面的示例中，我们定义了所有这些格式。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; } 
p { color:rgb(0, 220, 98); } 
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

输出

这是标题 1

这是标题 2

这是一个段落。

2) CSS 字体系列

CSS 字体系列可分为两类

通用字体系列：包括衬线、无衬线和等宽字体。
字体系列：指定字体系列名称，如 Arial、New Times Roman 等。

衬线字体：衬线字体在字符末端带有小线条。衬线字体的示例：Times new roman、Georgia 等。

无衬线字体：无衬线字体在字符末端不带小线条。无衬线字体的示例：Arial、Verdana 等。

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; } 
p { font-family: monospace; } 
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

输出

此标题显示为无衬线字体。

此标题显示为衬线字体。

此段落以等宽字体书写。

3) CSS 字体大小

CSS 字体大小属性用于更改字体的大小。

以下是可以用于设置字体大小的可能值

字体大小值	描述
xx-small (极小)	用于显示极小的文本大小。
x-small (特小)	用于显示特小的文本大小。
small（小）	用于显示小的文本大小。
medium（中等）	用于显示中等大小的文本。
large（大）	用于显示大号文本。
x-large (特大)	用于显示特大号文本。
xx-large (极大)	用于显示极大的文本大小。
smaller (更小)	用于显示相对更小的文本大小。
larger (更大)	用于显示相对更大的文本大小。
像素或 % 的大小	用于设置百分比或像素值。

<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;">  This font size is extremely small.</p>  
<p style="font-size:x-small;">  This font size is extra small</p>  
<p style="font-size:small;">  This font size is small</p>  
<p style="font-size:medium;">  This font size is medium. </p>  
<p style="font-size:large;">  This font size is large. </p>  
<p style="font-size:x-large;">  This font size is extra large. </p>  
<p style="font-size:xx-large;">  This font size is extremely large. </p>  
<p style="font-size:smaller;">  This font size is smaller. </p>  
<p style="font-size:larger;">  This font size is larger. </p>  
<p style="font-size:200%;">  This font size is set on 200%. </p>  
<p style="font-size:20px;">  This font size is 20 pixels.  </p>  
</body>
</html>

输出

此字体大小极小。

此字体大小为特小

此字体大小为小

此字体大小为中等。

此字体大小为大。

此字体大小为特大。

此字体大小为极大。

此字体大小更小。

此字体大小更大。

此字体大小设置为 200%。

此字体大小为 20 像素。

4) CSS 字体样式

CSS Font style 属性定义了您想显示的字体类型。它可以是斜体、倾斜或普通。

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; } 
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

输出

此标题显示为斜体。

此标题显示为倾斜字体。

此标题显示为普通字体。

5) CSS 字体变体

CSS Font variant 属性指定如何设置元素的字体变体。它可以是 normal（普通）和 small-caps（小型大写字母）。

<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

输出

此标题显示为普通字体。

此段落显示为小型字体。

6) CSS 字体粗细

CSS Font weight 属性定义了字体的粗细，并指定了字体的粗糙程度。字体粗细的可能值可以是 normal（普通）、bold（粗体）、bolder（更粗）、lighter（更细）或数字（100、200...直到 900）。

<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

输出

此字体为粗体。

此字体更粗。

此字体更细。

此字体粗细为 100。

此字体粗细为 200。

此字体粗细为 300。

此字体粗细为 400。

此字体粗细为 500。

此字体粗细为 600。

此字体粗细为 700。

此字体粗细为 800。

此字体粗细为 900。

下一主题CSS 字体大小

CSS 字体

1) CSS 字体颜色

这是标题 1

这是标题 2

2) CSS 字体系列

此标题显示为无衬线字体。

此标题显示为衬线字体。

3) CSS 字体大小

4) CSS 字体样式

此标题显示为斜体。

此标题显示为倾斜字体。

此标题显示为普通字体。

5) CSS 字体变体

此标题显示为普通字体。

6) CSS 字体粗细

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 字体

1) CSS 字体颜色

这是标题 1

这是标题 2

2) CSS 字体系列

此标题显示为无衬线字体。

此标题显示为衬线字体。

3) CSS 字体大小

4) CSS 字体样式

此标题显示为斜体。

此标题显示为倾斜字体。

此标题显示为普通字体。

5) CSS 字体变体

此标题显示为普通字体。

6) CSS 字体粗细

相关帖子

CSS Overflow

page-break-after 属性

word-break property

CSS Last-Child

CSS 颜色

Grid Template Columns CSS

CSS Button Hover Effects

CSS text-overflow

CSS word-spacing

CSS Login

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器