CSS3 字体
天天向上
发布： 2025-02-21 22:54:03
原创
547
人浏览过
CSS3 字体相关的内容主要涉及字体的定义、加载、样式、以及如何通过 CSS 控制字体的显示。下面是一些常用的 CSS3 字体相关属性和实例。
1. font-family
定义元素的字体系列。可以指定一个或多个字体，并按顺序从左到右查找可用字体。
body {
font-family: "Arial", "Helvetica", sans-serif;
}这个例子中，首先会尝试使用 Arial 字体，如果没有，则使用 Helvetica，如果这些字体都不可用，则使用默认的无衬线字体 sans-serif。
2. font-size
定义字体的大小。
h1 {
font-size: 36px;
}这里设置了 h1 元素的字体大小为 36 像素。
3. font-weight
控制字体的粗细。常用的值有 normal、bold，或者具体的数值（100到900）。
p {
font-weight: bold;
}该例子将段落字体设置为粗体。
4. font-style
定义字体的样式，如斜体。
em {
font-style: italic;
}这段代码使得 <em> 元素的文字变为斜体。
5. @font-face
通过 @font-face 规则，您可以自定义网页的字体，甚至是引入网络字体。
@font-face {
font-family: "MyCustomFont";
src: url("my-custom-font.woff2") format("woff2"),
url("my-custom-font.woff") format("woff");
}
body {
font-family: "MyCustomFont", Arial, sans-serif;
}这个例子通过 @font-face 引入了一个自定义字体 MyCustomFont，并为页面指定了这个字体。如果该字体不可用，则使用 Arial 和默认的无衬线字体。
6. line-height
控制行高，可以让文字的行间距更合适。
p {
line-height: 1.6;
}这段代码会让段落的行高是字体大小的 1.6 倍，使得段落间的间距更为舒适。
7. text-transform
控制文本的大小写转换。
h2 {
text-transform: uppercase;
}该样式会把所有 h2 元素中的文本转换为大写字母。
8. letter-spacing
调整字符间距。
h2 {
letter-spacing: 2px;
}这个例子设置了 h2 元素的字母间距为 2 像素。
综合实例
假设我们想创建一个有自定义字体的网页标题，样式要包括字体、大小、行高等：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 字体示例</title>
<style>
@font-face {
font-family: "MyCustomFont";
src: url("my-custom-font.woff2") format("woff2"),
url("my-custom-font.woff") format("woff");
}
h1 {
font-family: "MyCustomFont", Arial, sans-serif;
font-size: 48px;
font-weight: bold;
font-style: italic;
line-height: 1.4;
text-transform: capitalize;
letter-spacing: 1px;
}
</style>
</head>
<body>
<h1>Welcome to the Font Styling Example</h1>
</body>
</html>这个页面使用了 @font-face 来加载自定义字体，并且通过 CSS3 控制了标题的字体、大小、行高、文本转换、字母间距等属性。