cssfontfamily字体大全

/* CSS Font Family 示例代码 */

/* 1. 使用系统字体 */
body {
    font-family: Arial, sans-serif; /* Arial 是一种无衬线字体，如果系统中没有 Arial，则使用默认的无衬线字体 */
}

/* 2. 使用多种字体备选 */
h1 {
    font-family: "Times New Roman", Times, serif; /* 首先尝试使用 "Times New Roman"，如果没有则使用 Times，最后使用默认的 serif 字体 */
}

/* 3. 使用 Google Fonts 引入的自定义字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif; /* 使用从 Google Fonts 引入的 Roboto 字体 */
}

/* 4. 使用本地字体文件 */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
}

.custom-font {
    font-family: 'MyCustomFont', sans-serif; /* 使用自定义字体，并提供 sans-serif 作为备选 */
}

解释说明：

• Arial, sans-serif: 指定 Arial 作为首选字体，如果没有 Arial，则使用系统的默认无衬线字体。
• "Times New Roman", Times, serif: 按顺序尝试使用 "Times New Roman"、Times 和默认的 serif 字体。
• Google Fonts: 通过 @import 语句引入外部字体库（如 Google Fonts），然后在样式中使用该字体。
• @font-face: 定义并引入本地字体文件，确保网页可以在用户的设备上正确显示自定义字体。