CSS：font-family作用

原创已于 2024-05-30 00:55:58 修改 · 1.8k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

于 2024-05-30 00:52:54 首次发布

前端专栏收录该内容

42 篇文章

订阅专栏

font-family作用

介绍
代码
举例
常用方法
通用字体族
补充

介绍

在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>