font-family作用
- 介绍
- 代码
- 举例
- 示例
- 分析
- 示例
- 分析
- 常用方法
- 1.使用字体族
- 2.使用系统字体
- 3.使用Web字体
- 4.使用CSS变量
- 5.使用font-face规则
- 通用字体族
- 补充
介绍
在Web开发中，font-family 是CSS的一个属性，用于指定一个网页元素应该使用哪些字体样式。font-family 属性可以包含多个字体名称，这样浏览器会按照列表中的顺序尝试加载字体，直到找到可用的字体为止。
代码
selector {font-family: "Font1", "Font2", generic-family;
}
其中：
"Font1"和"Font2"是具体的字体名称。generic-family是通用字体族，例如serif,sans-serif,monospace,cursive,fantasy, 等等。
举例
示例
body {font-family: "Helvetica Neue", Arial, sans-serif;
}
分析
在这个例子中，浏览器会首先尝试使用 "Helvetica Neue" 字体，如果不可用，则尝试使用 Arial 字体，最后使用 sans-serif 通用字体族。
指定字体名称：
示例
body {font-family: "Times New Roman", Times, serif;
}
分析
在这个例子中，浏览器首先尝试使用 “Times New Roman” 字体，如果该字体不可用，则尝试 “Times” 字体，如果 “Times” 也不可用，则使用默认的 serif 字体。
常用方法
1.使用字体族
h1 {font-family: Arial, sans-serif;
}
这里，Arial 是一个具体的字体名称，而 sans-serif 是一个字体族，表示无衬线字体。
2.使用系统字体
p {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
这个例子中，-apple-system 和 BlinkMacSystemFont 是系统字体，它们会根据用户操作系统自动选择字体。
3.使用Web字体
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');body {font-family: 'Roboto', sans-serif;
}
在这个例子中，我们首先通过 @import 规则导入了Google Fonts中的 Roboto 字体，然后在 font-family 中使用它。
4.使用CSS变量
:root {--main-font: "Helvetica Neue", sans-serif;
}
body {font-family: var(--main-font);
}
通过CSS变量，你可以在一个地方定义字体，然后在多个地方使用它，这样更易于维护。
5.使用font-face规则
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘myfont.woff2’) format(‘woff2’),
url(‘myfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘MyCustomFont’, Arial, sans-serif;
}
使用 @font-face 规则，你可以定义自定义字体，然后像使用其他字体一样在 font-family 中引用它。
通用字体族
serif：有衬线字体，如 Times New Roman。sans-serif：无衬线字体，如 Arial。monospace：等宽字体，如 Courier New。cursive：手写体，如 Comic Sans MS。fantasy：幻想字体，如 Impact。
确保你指定的字体在不同的设备和操作系统上都有安装，以确保一致的外观效果。如果某个字体不可用，浏览器会自动选择下一个可用的字体。
补充
你也可以使用Web字体，如Google Fonts，通过在HTML文件中引入字体链接来使用在线字体。例如：
<head><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"><style>body {font-family: 'Roboto', sans-serif;}</style>
</head>
这样可以确保你的网页在所有设备上使用相同的字体，而不依赖于本地安装的字体。
)
